How to make a link like button using CSS?

Link Like Button

Hi,

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.

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.

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;

}

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.

CSS for hover effect to button.

.link-button:hover {

     Background-color:  #aa8d56;

     Color: #ffffff;

}

Your link will look like this after applying above Styles.

Here we have change background color of that button when hover the mouse and also change text color related to that background to see proper.

Thank you for watching this tutorial if you want any help in any topic please ask it in comment I will write tutorial for that.

Thank you so much again.