UPDATED: MAY 06, 2015 – ARTICLE: BACKGROUND COLOUR FOR LINKS HTML CSS STYLING LINKS

Background colour for links. Have you ever wanted to have a background colour on your site to highlight one of your links? Then use our background colour for links code. Using link HTML CSS styling you can easily have any background colour on any link. Using our background for links CSS code you can have a background colour on your link. When visitors hover over the link the background colour and link colour will change.

Catch your visitors attention when they see the link with our background colour for links CSS code. The background colour and text colour changes on hover. Change the text size quickly and easily as well.

Background Colour for Links sample below

Below is a sample of what the CSS Code does to the link. You also have to include a code in the hyper-link. The code in the hyper-link is unique, this means that the CSS code and HTML code in the link work together and will not effect other links on your page. All other links will be the same and not effected by any changes you make in the CSS styling. The only link that will change will be the hyper-link with the code.

 Background Colour For Links 

Below is the CSS Code for your background colour for links notice that in the CSS code we use .gx3 this is the same code we will use in the hyper-link.

You can change the font size, line height, font-weight and font family to what ever you want. Change the text colour of the link where it says color and change the background colour where it says background-color.

/* CSS CODE START BACKGROUND COLOUR FOR LINKS */
/* LOTS MORE CSS CODES http://www.2createawebsites.com  */
.gx3{margin-left:1.0em;font-size:30px; line-height: 32px; font-weight: none; font-family: Bitter, Georgia, serif;}
  .gx3:link {
/* Applies to links */
color: #FFFFFF;
background-color:#000000; 
text-decoration: none;
}
.gx3:visited {
/* Applies to visited links */
color: #FFFFFF;
background-color:#000000;
text-decoration: none;  
}
.gx3:hover {
/* Applies to hover links */
color: #000000;
background-color:#C5C3BE;
text-decoration: none;
 }
/* CSS CODE END BACKGROUND COLOUR FOR LINKS */

Next you need the Hyper-link with the code

Below is the hyper-link and as you can see the code is in the link (class=”gx3″)

 <a href="http://www.yourlink.com" title="Your title goes here" onclick="gbar.qs(this)" class="gx3"> Anchor Text Here  </a>

Can you have different color back-grounds on the same page

Yes you can set up as many different background colour for links on the same page as you want when you build a website.

Copy the above code for your first set of links edit the code to what you want. Next copy the same code CSS and Link code and all you have to do is change (“gx3”) to “gx4” on the CSS and Link code.

You can use any 3 numbers you want, as long as the same number in the CSS code is in the Link code.

You might also want to check these sites out

w3shools.com – http://www.w3schools.com/css/css_link
Site Wizard – http://www.thesitewizard.com/css/links-mouseover.shtml
stackoverflow.com – http://stackoverflow.com/questions/13515759/changing-background-color-of-a-block-link-on-hovering