This technique is simple and effective way to have buttons with nice rounded edges using plain CSS without any Javascript usage.
This method was tested on these common browsers:
- Internet Explorer
- Mozilla Firefox
- Opera
- Safary
- Google Chrome
Download full example with images here.
Source code for index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>My project</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link media="screen" type="text/css" rel="stylesheet" href="/webtoolkit.rbuttons.css" />
</head>
<body>
<a class="rbutton red" href="/index.html"><span>Red</span></a>
<a class="rbutton green" href="/index.html"><span>Green</span></a>
<a class="rbutton blue" href="/index.html"><span>Blue</span></a>
</body>
</html>
|
Source code for webtoolkit.shadow.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
54
|
/* do not change */
.rbutton {
cursor: pointer;
display: -moz-inline-box;
display: inline-block;
padding-left: 5px;
padding-bottom: 1px;
line-height: 19px;
background-position: lef top;
background-repeat: no-repeat;
}
.rbutton span {
padding-left: 10px;
display: -moz-inline-box;
display: inline-block;
padding-right: 15px;
padding-bottom: 1px;
line-height: 19px;
background-position: right top;
background-repeat: no-repeat;
}
/* skin */
.red {
background-image: url(buttons/red-left.gif);
}
.red span {
background-image: url(buttons/red-right.gif);
}
.green {
background-image: url(buttons/green-left.gif);
}
.green span {
background-image: url(buttons/green-right.gif);
}
.blue {
background-image: url(buttons/blue-left.gif);
}
.blue span {
background-image: url(buttons/blue-right.gif);
}
/* font size and family */
.rbutton {
font-family: verdana;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
color: #000000;
}
|