Using CSS3 pseudo-classes and transitions to create interactive links and buttons

Hyperlinks and buttons are a functional yet in general boring aspect of a website or web application. They tend to provide very little feedback when you interact with them. This doesn’t have to be the case, it’s very easy to add some simple styling to let the user know that they have either interacted with or can interact with an element.

Pseudo-classes And Selectors

Pseudo-classes for links have been in CSS for many years and for the most part people just reset them all to be the same color and text-decoration. This defeats their purpose and masks the functionality that they provide.

By adding just a few classes to your CSS you can create a much more professional and user friendly menu or form. The pseudo-classes we’ll be looking at today are:

I’ll also show you how to combine these class selectors to create specific use cases.

Getting Started

The first thing we need to do is give our list of links some basic styling. I’ve gone with a simple blue text on a light gray background. I’ve also removed the text-decoration for now, but we’ll be adding it back in later. To give the links a button-like feel I’ve changed the display to block and added a solid border.

a {        
    color: #1c8dc7;
    padding: 10px;
    text-decoration: none;
    font-size: 20px;
    background-color: #c2c2c2;
    border: 1px solid #ffffff; 
    display: block;
}

links1

Interacting

The first style we’re going to add is when a user hovers over the element. To do this we use the :hover class, here I’m changing the color and background-color to show that the user is actually over the element.

a:hover {
    color: #7cc9f0;
    background-color: #cccccc;
}

links-hover

Now that we know we’re over an element, we can use the :active class to change the color, background-color and text-decoration when they actually click or press down on the element

a:active {
    color: #7cc9f0;
    background-color: #555555;
    text-decoration: underline;
}

links-active

In my sample HTML I’ve provided, each hyperlink has an ID attribute. This enables be to use the :target class to add additional styling to the currently selected element.

a:target {
    color: #f59805;
    background-color: #555555;
    text-decoration: underline;
}

links-target

For an added effect, we’re also going to add the little used :first-letter class. This only works on block display elements (which we applied earlier), and all it does is allow us to style the first letter of the element. Here I’ve gone with the color black, but you could use a different font all together.

a:first-letter {
    color: #333333;            
}

a:active:first-letter, a:target:first-letter {
    color: #eeeeee;            
}

links-first-letter

As you can see I’ve also combined the :first-letter and :active classes to apply a different color when the element is currently active or targeted.

Going That Extra Mile

To really tie these changes together we need to make the changes a little smoother and cleaner. To do this we’re going to use the transition property to make the color changes fade in over a period of time. Here I’ve specified the duration of 0.5 of second, you don’t want the transition to be too quick, but if it’s too slow it won’t look as effective either

a {        
    color: #1c8dc7;
    padding: 10px;
    text-decoration: none;
    font-size: 20px;
    background-color: #c2c2c2;
    border: 1px solid #ffffff; 
    display: block;
    line-height: 105%;
    
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;                
}

You can see a demo of the styling or download it below

SHARE THIS POST
  • http://www.parafriv.net/ Para Friv

    I am a teacher, information technology is an area I really do not understand much. Thanks for the information shared article, it is useful to me now.

  • miid

    pWrT – The Last years i have been so very lacking in $$ and debts were killing me from everywhere. That was UNTIL i decided to generate money.. on the INTERNET! I visited surveymoneymaker d-o-t net, and started doing surveys for money, and yes, I’ve been far more able to get around financialy! i am so happy, that I did this!!! – aNPt

  • http://www.friv2friv3friv4.com/ friv 2 friv 3 friv 4

    Thanks for the information shared article, it is useful to me now.