Click here to Skip to main content
13,252,206 members (56,497 online)
Click here to Skip to main content
Add your own
alternative version

Stats

4.1K views
1 bookmarked
Posted 18 Jun 2017

How to make a link like button using CSS?

, 20 Jun 2017
Rate this:
Please Sign up or sign in to vote.
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.

License

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

Share

About the Author

Uday A. Navapara
Software Developer (Senior)
India India
No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionCannot see your image Pin
Hannes_Malan20-Jun-17 0:32
professionalHannes_Malan20-Jun-17 0:32 
AnswerRe: Cannot see your image Pin
Uday A. Navapara20-Jun-17 2:56
professionalUday A. Navapara20-Jun-17 2:56 
PraiseRe: Cannot see your image Pin
Hannes_Malan20-Jun-17 5:00
professionalHannes_Malan20-Jun-17 5:00 
GeneralRe: Cannot see your image Pin
Uday A. Navapara20-Jun-17 5:05
professionalUday A. Navapara20-Jun-17 5: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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.171114.1 | Last Updated 20 Jun 2017
Article Copyright 2017 by Uday A. Navapara
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid