What is a MouseClick effect?

The MouseClick effect is everything you will see when you click on a link item. In JavaScript, this is a piece of cake when you use a property like onMouseClick or onMouseDown. Today, we will try to obtain the same effect using CSS.

We have to style the a:active selector to get the desired effect.

An example

We will begin with a normal, unstyled link. That link has a blue color and a underline, a red color when you have selected the link, a purple color if you have already visited the link. And when you roll your mouse over the link, the underline will be removed.

Just a normal link tag:

1

<a>Link</a>

And now the CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

a {
color: #2665aa;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
a:active {
color: #666666;
}

As you can see, it is really simple to change everything via your CSS. Most likely, you already know this. If not, you should read some other articles regarding css which can be found in the CSS tag. Some more in-depth information follows next.

The MouseClick example

To give this technique a real example we use an un-ordered list with preloaded images. Take a look below.

First some basic html, a normal un-ordered list:

HTML:

1
2
3
4
5
6
7
8
9
10
11

<ul>
	<li><a>Item</a></li>
	<li><a>Item</a></li>
	<li><a>Item</a></li>
	<li><a>Item</a></li>
</ul>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

ul {
list-style: none;
}
ul li {
display: inline;
margin: 0;
padding: 0;
}
ul li a {
float: left;
display: block;
width: 81px;
height: 26px;
color: #333;
text-align: center;
background-image: url(NavigationBackground.png);
background-repeat: none;
background-position: 0 0;
}
ul li a:hover {
background-position: 0 -26px;
color: #cccccc;
}
ul li a:active {
background-position: 0 -52px;
color: #cccccc;
}

You’re might ask yourself this question: Where are the different background images?

We actually use only one image to split normal background, hover background and MouseClick background. It is all about positioning that image to show the right background in the right place. The image can be found below:

In the CSS provided to you in the MouseClick example, you will see the different a:selectors getting styled. With the background-position our image gets positioned.

If you want to see a real example regarding the MouseClick effect, please visit the following link.

MouseClick effect – Example

Conclusion

This effect is a nice little addition to your website, which is easy to use. If you have any more questions, you could contact me via the comments.

Thanks for reading.