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.