Click here to Skip to main content
15,867,686 members
Articles / Web Development / HTML5
Tip/Trick

How to make a link like button using CSS?

Rate me:
Please Sign up or sign in to vote.
3.18/5 (5 votes)
20 Jun 2017CPOL1 min read 19.8K   1   4
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

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

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

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionCannot see your image Pin
Hannes_Malan19-Jun-17 23:32
professionalHannes_Malan19-Jun-17 23:32 
AnswerRe: Cannot see your image Pin
Uday A. Navapara20-Jun-17 1:56
professionalUday A. Navapara20-Jun-17 1:56 
PraiseRe: Cannot see your image Pin
Hannes_Malan20-Jun-17 4:00
professionalHannes_Malan20-Jun-17 4:00 
GeneralRe: Cannot see your image Pin
Uday A. Navapara20-Jun-17 4:05
professionalUday A. Navapara20-Jun-17 4:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.