One of the easiest and neatest tools that you can utilize for web design is the rollover link. You’ve probably seen a link that will change the size, color, or take on an underline when you roll your mouse over the link. This creates easy navigation for the user and can highlight an otherwise plain design.
The effect is actually pretty simple to achieve using CSS. Here is how you do it.
First, you create a CSS class for links. Let’s say you’re designing a website for MC Hammer, and he wants the links to grow, shine gold, and be underlined when they are moused over.
The CSS would look something like this:
a: link{
font-size:12px;
text-decoration:none;}
a:visited{
font-size:12px;
text-decoration:none;}
a:hover{
font-size:16px;
color:#FFCC33;
text-decoration:underline;}
We just defined three states for every link on the website (that uses this style sheet). Upon hovering over a link, it will change to gold (#FFCC33), grow to sixteen pixels, and be underlined.
Defining it like this will apply the style to all the links on your webpage that use this style sheet, but you can achieve the same effect with only one specific link in mind.
Let’s say you wanted extra emphasis for only one specific link. You can create a special class that will affect any link you want it to, be not globally across the page.
Here is the CSS for the “hammerTime” class:
a.hammerTime: link{
font-size:12px;
text-decoration:none;}
a.hammerTime:visited{
font-size:12px;
text-decoration:none;}
a.hammerTime:hover{
font-size:26px;
color:#FFCC33;
text-decoration:underline;
font-style: italic;}
The code is similar, but notice that we specify the name “hammerTime” as a specific class, so it won’t affect every link on the web page. It will only affect the links that you specify. It also has the size increased to twenty-six pixels, and now also italicizes the text as well upon hovering over the link.
If you wanted to apply this style to a specific link, let’s say to a web design companies webpage, you would create a link like this:
<a href=”https://www.webii.net/design” class=”hammerTime”>WEBii: Good Design is Good Business</a>
Notice the ‘class=”hammerTime”‘ inside of the <a> tag. This specifies that the link will use the hammerTime style instead of the global link style previously defined.
While increasing your text size by twenty pixels and italicizing, color-changing, and underlining might not be the best web design practice, you can take the concept and use it to add highlight effects to your links. Your webpage will definitely be too legit to quit.