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;
}
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;
}
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;
}
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;
}
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;
}
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
Post a Comment