How to make an HTML Link look like a Button using CSS?

The basic function of an HTML link is to help visitors navigate across different kinds of resources on our website. But, did you know we can style these links look exactly like buttons?

Well, it’s quite simple and we can very easily do this with the help of CSS.

Here is a working example:

Example:

.link-button{
   text-decoration: none; /* Removes underline */
   color: white;
   background: #17a2b8;
   padding: 10px 20px;
   border-radius: 5px;
   cursor: pointer;
   display: inline-block;  
   white-space: nowrap;  /* Stops text wrapping */
}
.link-button:hover{
   background: #138496;  /* Adds hover effect */
}
.link-button:active{
   background: #04404a;  /* Adds click effect */
}

Here is one more example with an outline button.

Example:

.link-button{
   text-decoration: none;
   color: #17a2b8;
   background: transparent;
   border: 1px solid #17a2b8;
   padding: 10px 20px;
   border-radius: 5px;
   cursor: normal;
   display: inline-block;
   white-space: nowrap;
}
.link-button:hover{
   background: #17a2b8;
   color: white;
}
.link-button:active{
   background: #04404a;
}

Thanks for reading.

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.