Quick Reach
The button and CSS
You can use CSS to create buttons in your web pages that also match the theme of your website. You can use inline CSS properties in the style attribute of the button or add the CSS class/id for separately created CSS (internal or external).
In the following examples, we will use both ways to create the buttons i.e. by using the style attribute and using CSS classes. The last two examples show beautifully designed CSS3 based buttons. Use CSS 3 buttons only if you have no issue with the visitors using the older version of web browsers.
A button example with different CSS properties
The following example applies the font size, color, height, width etc. by using the class name to the buttons.
|
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
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Button</title>
<style>
.btnclass{
font-size:12px;
color: red;
font-family: Verdana;
text-align:center;
height:50px;
width:50px;
}
</style>
</head>
<body>
<button type=“button” class=“btnclass”>Next</button>
<button type=“button” class=“btnclass”>Back</button>
<button type=“button” disabled>Last</button>
</body>
</html>
|
CSS button example with background image
The following example sets the background image by using CSS background-image property to the HTML button.
|
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
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Button</title>
<style>
.btnclass{
font-size:12px;
color: yellow;
font-family: Verdana;
text-align:center;
height:50px;
width:50px;
background-image: url(submitimg.jpg);
}
</style>
</head>
<body>
<button type=“button”>Next</button>
<button type=“button” class=“btnclass”>Back</button>
</body>
</html>
|
Button CSS example with style attribute of button
In the following example, a button is created with the same set of properties as in the above example. However, this time we used the style attribute of the buttons.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Button</title>
</head>
<body>
<button type=“button” style=“font-size:12px;color: yellow; font-family: Verdana;text-align:center;height:50px;width:50px;background-image: url(submitimg.jpg);”>Next</button>
<button type=“button” style=“font-size:12px;color: yellow; font-family: Verdana;text-align:center;height:50px;width:50px;background-image: url(submitimg.jpg);”>Back</button>
</body>
</html>
|
CSS3 button Example
The following example shows a CSS3 based button. Note that, this may have problems in the older web browsers like IE 8 or older versions.
|
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
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Button</title>
<style type=”text/css”>
.css3ex1 {
-moz-box-shadow:inset 0px 16px 0px 0px #f29c93;
-webkit-box-shadow:inset 0px 16px 0px 0px #f29c93;
box-shadow:inset 0px 16px 0px 0px #f29c93;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fe1a00′, endColorstr=’#ce0100′);
background-color:#fe1a00;
-webkit-border-top-left-radius:18px;
-moz-border-radius-topleft:18px;
border-top-left-radius:18px;
-webkit-border-top-right-radius:18px;
-moz-border-radius-topright:18px;
border-top-right-radius:18px;
-webkit-border-bottom-right-radius:18px;
-moz-border-radius-bottomright:18px;
border-bottom-right-radius:18px;
-webkit-border-bottom-left-radius:18px;
-moz-border-radius-bottomleft:18px;
border-bottom-left-radius:18px;
text-indent:0;
border:1px solid #d83526;
display:inline-block;
color:#ffffff;
font-family:Verdana;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:-1px -1px 0px #b23e35;
}
.css3ex1:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ce0100′, endColorstr=’#fe1a00′);
background-color:#ce0100;
}.css3ex1:active {
position:relative;
top:1px;
}
</style>
</head>
<body>
<button> Next </button>
</body>
</html>
|
CSS based submit button example
Following example shows an input type = submit button which is styled with CSS3. You can change different properties of CSS 3 as per needs. Note, no image is used in this button.
|
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
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Button</title>
<style type=”text/css”>
.submitcls {
-moz-box-shadow:inset 0px 16px 0px 0px #fff6af;
-webkit-box-shadow:inset 0px 16px 0px 0px #fff6af;
box-shadow:inset 0px 16px 0px 0px #fff6af;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23) );
background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffec64′, endColorstr=’#ffab23′);
background-color:#ffec64;
-webkit-border-top-left-radius:15px;
-moz-border-radius-topleft:15px;
border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-moz-border-radius-topright:15px;
border-top-right-radius:15px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #ffaa22;
display:inline-block;
color:#333333;
font-family:Georgia;
font-size:15px;
font-weight:bold;
font-style:italic;
height:40px;
line-height:40px;
width:86px;
text-decoration:none;
text-align:center;
text-shadow:-1px -1px 0px #ffee66;
}
.submitcls:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64) );
background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffab23′, endColorstr=’#ffec64′);
background-color:#ffab23;
}.submitcls:active {
position:relative;
top:1px;
}
</style>
</head>
<body>
<form action=“” method=“post”>
Name: <input type=“text” name=“name”> <br />
Email:<input type=“text” name=“email”> <br />
<input type=“submit” class=“submitcls”>
</form>
</body>
</html>
|
Leave A Comment?