CSS Push Button Effect

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

<ul>
<li><a href="http://www.handycss.com/">Home</a></li>
<li><a id="cpl-on" href="http://www.handycss.com/effects/">CSS Effects</a></li>
<li><a href="http://www.handycss.com/tips/">CSS Tips</a></li>
<li><a href="http://www.handycss.com/tutorials/">CSS Tutorials</a></li>
<li><a href="http://www.handycss.com/how/">How to</a></li>
<li><a href="http://www.handycss.com/css-menus/">CSS Menus</a></li>
<li><a href="http://www.handycss.com/wiki/">CSS Wiki</a></li>
</ul>

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
54
55
56
57
58
59
60
61
62
63

ul.cpl a {
width : 200px;
height : auto;
display : block;
border : 2px outset #669900;
text-decoration : none;
background-color : #669900;
color : #eee;
font-weight : bold;
padding : 3px 10px;
outline : 0;
cursor : pointer;
}
ul.cpl a:hover, ul.cpl a:focus {
border : 2px outset #537800;
background-color : #537800;
color : #fff;
}
ul.cpl a:active {
border : 2px inset #27470e;
background-color : #27470e;
color : #999;
padding : 2px 11px 4px 9px;
}
ul.cpl a#cpl-on, ul.cpl a#cpl-on:hover, ul.cpl a#cpl-on:focus, ul.cpl a#cpl-on:active {
border : 2px outset  #27470e;
background-color : #27470e;
color : #ffee00;
cursor : default;
text-transform : uppercase;
padding : 3px 10px;
}