Transform a tag into a button with CSS (href tag)

September 17, 2021

Transform a tag into a button with CSS (href tag)

Often the style that comes by default in the HTML a tag doesn’t work for layouts, so let’s learn how to transform a tag into a button with CSS.

transform a tag into a button cover

Transform tag a into a button with CSS: theory

We sometimes need to completely change the appearance of elements in HTML.

This is the case of the links tag when we need to transform the a tag into a button.

Because many links on web pages have a style quite different from the underlined pattern that appears on pages.

We can try to solve the problem by replacing the a element with a button and making an event in JavaScript.

But in this case, we would be increasing the level of code complexity and also the number of resources to achieve a simple goal.

Which is just: switch links by clicking on an element.

So the simplest, most effective, and most effective way is to make this change only in style, with CSS.

Transform tag a into a button with CSS: practical

Let’s see this transformation in practice

See an example:

<a href="#">Click here!</a>

With this code, we have just a normal HTML link


Now adding some CSS:

a {
     display: block;
     width: 160px;
     height: 40px;
     line-height: 40px;
     padding: 10px 5px;
     margin: 20px;
     background-color: #000;
     color: #FFF;
     border-radius: 5px;
     text-decoration: none;
     text-align: center;
     font-weight: bold;
     font-family: Arial;

See the transformation:


Note that there is a button-like structure in the code, all done by CSS without modifying the tag.

So we keep the link effect, without any additional inconvenience, cool right? 😀

Another thing that can be done to make it even cooler is to add a transition with the :hover pseudo-element.

For a subtle color change so you can make the design modern too.


In this article, we saw that you can change the appearance of an a tag to look like a button.

So we don’t need to make any sudden changes to our code, just add CSS.

And that’s it for today, until the next post!

Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x