Change a Link’s Color When Hovered Using CSS

Hello,

Learn how to change the color or any CSS property of a link or any element using just CSS. This is useful for example when you are using <a>s to simulate a button and want to create a clickable effect when hovered.

Let’s say we have a link with the class ‘link‘:

<a href='#' class='link'>SOME LINK</a>

and the CSS for the class link is:

a.link {
 padding:5px;
 text-align:center;
 background-color:#000;
}

and we want the button’s background to turn white when hovered.

1. We will use the keyword hover in our CSS to add new properties for when it is hovered. We will use it like this:

a.link:hover {

}

2. Now let’s change the background color for that case:

a.link:hover {
 background-color:white;
}

Our complete CSS would be:

a.link {
 padding:5px;
 text-align:center;
 background-color:#000;
}

a.link:hover {
 background-color:#fff;
}

You can add any property you want. For example, you can change its opacity, decoration, font size, font color, width, etc. The possibilities are endless. If you have any questions or comments, please do not hesitate to contact me.

Best Regards,

Richi

Looking for quality Clip-Bucket hosting? Try out Arvixe and you won’t be disappointed.
Tags: , , , , , , , , , , , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

Richi González

Richi González

I started programming when I was 12. I'm a Developer and have been working with the Clip-Bucket script since it came out. I became a Liaison between Arvixe and Clip-Bucket, so I am here to assist you with anything you need regarding Clip-Bucket or any particular computer-related subject you need. Best Regards, Richi

Leave a Reply

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


8 + = 12

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>