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 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.

Conclusion

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!