Web Buttons: Set colors with CSS

Expression Engine: Control Panel
Button in ExpressionEngine: Control Panel

One of the many important details that make a well designed web site is the different links and buttons. Jesse Bennett-Chamberlain has understood and solved this beautifully, and its his button design I have tried to modify to some extent.

Basically I want to be able to change the color of the button without going into photoshop or some other graphics application. To solve this I needed to remake the button elements as .png files with a transparent core.

Photoshop file1

The file consists of two layers. One Shape layer with three Effects, and one Color Fill layer with a Layer Mask. The Shape layer is set to Fill: 0%, and the Color Fill layer underneath has masked out the Shape layer.

Photoshop file2
(You will find everything you need in the .ZIP package.)

Here is the XHTML:

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

<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" href="style.css" rel="stylesheet" />
<!--[if lte IE 6]>

	<link type="text/css" href="style_ie.css" rel="stylesheet" />
<![endif]-->
<title></title>
</head>
<body>
<div id="container">
 
	<div id="large">
		<ul>
			<li class="save"><a href="#"><strong><span>Save</span></strong></a></li>
			<li class="cancel"><a href="#"><strong><span>Cancel</span></strong></a></li>
			<li class="clear"><a href="#"><strong><span>LARGE red button with extra long text</span></strong></a></li>
		</ul>
	</div><!-- large end -->
 
	<div id="medium">
		<ul>
			<li class="save"><a href="#"><strong><span>Save</span></strong></a></li>
			<li class="cancel"><a href="#"><strong><span>Cancel</span></strong></a></li>
			<li class="clear"><a href="#"><strong><span>MEDIUM blue button with extra long text</span></strong></a></li>
		</ul>
	</div><!-- medium end -->
 
	<div id="small">
		<ul>
			<li class="save"><a href="#"><strong><span>Save</span></strong></a></li>
			<li class="cancel"><a href="#"><strong><span>Cancel</span></strong></a></li>
			<li class="clear"><a href="#"><strong><span>SMALL green button with extra long text</span></strong></a></li>
		</ul>
	</div><!-- small end -->
 
</div><!-- container end -->
</body>
</html>
 
<!-- end of code -->

And here is the 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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

/* -- GENERAL STYLE -- */
 
body { 
	font-family: Helvetica, Arial, sans-serif;
	font-size: 62.5%;
	background: #FFF;
	height: 100%;
	padding: 0; 
	margin: 0; 
}
 
ul {
	list-style:none;
	margin:0;
	padding:0;
}
 
li {
	display: inline;
	margin-bottom: 10px;
}
 
.clear {
	clear: both;
}
 
 
/* -- STRUCTURE STYLE -- */
 
#container {
	border: 1px solid #CCC;
	text-align: center;
	background: #EEE;
	width: 575px;
	margin: 15% auto 5%;
}
 
 
#large, #medium, #small {
	padding: 25px 0;
}
 
 
/* -- BUTTON STYLE -- */
 
#large ul li a {
    background: url(images/l_btn_lar.png) no-repeat left center #C00;
    line-height: 20px;
    padding: 10px 0;
    text-decoration: none;
    font-size: 1.4em;
}
#large ul li a strong {
    background: url(images/r_btn_lar.png) no-repeat right center;
    margin-left: 16px;
    width: 200px;
    padding: 10px 16px 10px 0;
    line-height: 30px;
    letter-spacing: 0.05em;
}
#large ul li a:link, #large ul li a:visited {
    color: #FFF;
}
#large ul li a:hover {
    background-color: #600;
}
#large ul li a:active {
    background-color: #000;
}
 
#medium ul li a {
    background: url(images/l_btn_med.png) no-repeat left center #28C;
    line-height: 20px;
    padding: 10px 0;
    text-decoration: none;
    font-size: 1.2em;
}
#medium ul li a strong {
    background: url(images/r_btn_med.png) no-repeat right center;
    margin-left: 14px;
    width: 200px;
    padding: 10px 14px 10px 0;
    line-height: 30px;
    letter-spacing: 0.05em;
}
#medium ul li a:link, #medium ul li a:visited {
    color: #FFF;
}
#medium ul li a:hover {
    background-color: #048;
}
#medium ul li a:active {
    background-color: #000;
}
 
#small ul li a {
    background: url(images/l_btn_sma.png) no-repeat left center #8C2;
    line-height: 20px;
    padding: 10px 0;
    text-decoration: none;
    font-size: 0.9em;
}
#small ul li a strong {
    background: url(images/r_btn_sma.png) no-repeat right center;
    margin-left: 12px;
    width: 200px;
    padding: 12px 12px 12px 0;
    line-height: 30px;
    letter-spacing: 0.05em;
}
#small ul li a:link, #small ul li a:visited {
    color: #FFF;
}
#small ul li a:hover {
    background-color: #480;
}
#small ul li a:active {
    background-color: #000;
}
 
li.save a strong span {
	background: url(images/save.png) no-repeat left center;
	padding: 10px 5px 10px 20px;
}
li.cancel a strong span {
	background: url(images/cancel.png) no-repeat left center;
	padding: 10px 5px 10px 20px;
}
/* -- end of code */

The project is not totally bulletproof, but it utilizes the principles in the Sliding Doors technique developed by Douglas Bowman as a base. It also uses .PNG graphics wich is rather painfull for Internet Explorer to handle. That is why I have made .gif graphics replacements for IE.

I hope you enjoyed this post and that the package can be usefull.
All feedback is quite welcome!

Download .ZIP package


Les kommentarer

  1. 7. August, 2007 Ceyhun AKSAN » Bağlantılar ve Derlemeler : Ağustos:

    […] Web Buttons: Set colors with CSS […]

  2. 20. December, 2007 Maximus:

    I would like to see a continuation of the topic


Skriv kommentar





Du kan bruke disse taggene: (XHTML)
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>