HTML Anchor Tag to Button using CSS

  • January 17, 2019
HTML Anchor Tag to Button using CSS

Link Like Button


I am back now with new concept of the CSS. Today I am going to show you how we can convert a link to the buttons. I mean your link will look like a button.

As we all know that we have to use anchor tag to display a link.

So, We have to create a link first, for that we have to write following code in our HTML.

[fr_heading text=”code”]

HTML code

<a href="contact.html">Contact Us</a>

Give one CSS class to the <a> tag to apply CSS on particular this link only.

<a href="contact.html" class="link-button">Contact Us</a>

Here, we have provided ”link-button” class to this URL. Now we are going to apply some CSS property on this class.

[fr_heading text=”CSS Code”]
.link-button { 
     background: #ffffff none repeat scroll 0 0; 
     border: 1px solid #aa8d56; 
     color: #aa8d56; 
     outline: medium none; 
     padding: 15px; 
     text-decoration: none; 
[fr_heading text=”Background”]

Here we have applied some CSS property to this link to convert it to button.

We have changed background color with #ffffff and border and text color with #aa8d56.

We have set property text-decoration : none to remove underline from link when every we hover mouse on it.

We have set outline:none for same to remove the outline from the link.

Now we will provide some hover effect to this button.

For that we will use pseudo class “:hover “ of the css.

.link-button:hover { 
        Background-color: #aa8d56; 
        Color: #ffffff;

Your link will look like this after applying above Styles.

Leave a Reply

Your email address will not be published. Required fields are marked *