Styling form buttons with CSS
There’s a wide range of opinion on styling form buttons with CSS. Is it even worth it? Different platforms and browsers all render them differently, right?
This article sets out a practical example of 3 varying button styles of increasing CSS complexity and shows how these render for <button> and <input> on a wide variety of platforms and browsers (40 variants!).
The base code is XHTML (DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"):
<input type="submit" value="Submit" />
<input type="submit" value="Submit" class="s1" />
<input type="submit" value="Submit" class="s2" />
<button value="submit" type="submit">Submit</button>
<button type="submit" value="submit" class="s1">Submit</button>
<button type="submit" value="submit" class="s2">Submit</button>
<button type="submit" value="submit" class="s3">
<span>Submit</span></button>
The last button element includes the embedded span tag in a hopeful attempt to see if the classic “Sliding Doors” technique could work to create nice rounded ends. Alas, this proves unfruitful, as there seems to be some kind of inherent padding inside of the button element. It works flawlessly on Opera and Safari though (bless ’em).
The following CSS rules are applied to the buttons through the s1, s2 and s3 classes:
.s1 {
font-size: .8em;
font-weight: bold;
border: 1px solid #999;
background-color: white;
padding: .3em 1em .4em;
}
.s2 {
font-size: .8em;
font-weight: bold;
border: 1px solid #999;
background: white url(button_style2.png) bottom left no-repeat;
padding: .3em 1em .4em;
}
.s3 {
height: 35px;
font-size: .8em;
font-weight: bold;
border: 0;
padding: 0;
background: white url(button_style3.png) top right no-repeat;
padding: 0 20px 0 0;
}
.s3 span {
height: 21px;
padding: 7px 0 7px 15px;
margin: 0 0 0 0;
display: block;
background: white url(button_style3.png) top left no-repeat;
}
This is what we are after (Opera 8.5 Mac providing the benchmark in this case):
You can view the test page here
I’ve heard much debate on <button> vs <input>. By testing them both side by side will hopefully dispell some of the myths about how much easier it is to style the button tag. With the exception of Safari and Camino on the Mac there is very little difference for styles 1 and 2 and they render very similarly on all browsers.
It should be noted however, that there are issues with <button> in Internet Explorer, relating to forms with multiple buttons on Internet Explorer.
Testing platforms and browsers
The page was tested on Mac OSX 10.4, Windows 98/2000/XP/Vista & Linux with AOL, Camino, Firefox, Internet Explorer, Konqueror, Mozilla, Netscape, Opera and Safari. Screenshots for each of these can viewed below. Use the anchor links below to go directly to the one you want.
- AOL 9.0 Windows 2000
- Camino 1.0 Mac OSX 10.4
- Firefox 5.0 Linux Fedora Core 4
- Firefox 5.0 Mac OSX 10.4
- Firefox 5.0 Windows 2000
- Firefox 5.0 Windows XP
- Firefox 2.0 Mac OSX 10.4
- Firefox 2.0 Windows 2000
- Firefox 2.0 Windows XP
- Firefox 2.0 Windows Vista
- Internet Explorer 4.0 Windows 98
- Internet Explorer 5.0 Windows 2000
- Internet Explorer 5.2 Mac OS 10.4
- Internet Explorer 5.5 Windows 2000
- Internet Explorer 6.0 Windows 2000
- Internet Explorer 6.0 Windows XP
- Internet Explorer 7.0 Windows 2000
- Internet Explorer 7.0 Windows Vista
- Konqueror 3.4.0-5 Linux Fedora Core 4
- Mozilla 1.6 Mac OSX 10.4
- Mozilla 1.6 Windows 2000
- Mozilla 1.6 Windows XP
- Mozilla 1.7.12 Linux Fedora Core 4
- Mozilla 1.7.12 Mac OSX 10.4
- Mozilla 1.7.12 Windows 2000
- Mozilla 1.7.12 Windows XP
- Netscape 4.78 Windows 2000
- Netscape 6.2.3 Windows XP
- Netscape 6.2 Windows 2000
- Netscape 7.2 Mac OSX 10.4
- Netscape 7.2 Windows 2000
- Netscape 7.2 Windows XP
- Opera 8.5.0 Mac OSX 10.4
- Opera 8.5.0 Windows 2000
- Opera 8.5.0 Windows XP
- Opera 9.0 Mac OSX 10.4
- Opera 9.0 Windows 2000
- Opera 9.0 Windows XP
- Opera 9.02 Windows Vista
- Safari 2.0 Mac OSX 10.4
AOL 9.0 Windows 2000
Camino 1.0 Mac OSX 10.4
Firefox 5.0 Linux Fedora Core 4
Firefox 5.0 Mac OSX 10.4
Firefox 5.0 Windows 2000
Firefox 5.0 Windows XP
Firefox 2.0 Mac OSX 10.4
Firefox 2.0 Windows 2000
Firefox 2.0 Windows XP
Firefox 2.0 Windows Vista
Internet Explorer 4.0 Windows 98
Internet Explorer 5.0 Windows 2000
Internet Explorer 5.2 Mac OS 10.4
Internet Explorer 5.5 Windows 2000
Internet Explorer 6.0 Windows 2000
Internet Explorer 6.0 Windows XP
Internet Explorer 7.0 Windows 2000
Internet Explorer 7.0 Windows Vista
Konqueror 3.4.0-5 Linux Fedora Core 4
Mozilla 1.6 Mac OSX 10.4
Mozilla 1.6 Windows 2000
Mozilla 1.6 Windows XP
Mozilla 1.7.12 Linux Fedora Core 4
Mozilla 1.7.12 Mac OSX 10.4
Mozilla 1.7.12 Windows 2000
Mozilla 1.7.12 Windows XP
Netscape 4.78 Windows 2000
Netscape 6.2.3 Windows XP
Netscape 6.2 Windows 2000
Netscape 7.2 Mac OSX 10.4
Netscape 7.2 Windows 2000
Netscape 7.2 Windows XP
Opera 8.5.0 Mac OSX 10.4
Opera 8.5.0 Windows 2000
Opera 8.5.0 Windows XP
Opera 9.0 Mac OSX 10.4
Opera 9.0 Windows 2000
Opera 9.0 Windows XP
Opera 9.02 Windows Vista
Safari 2.0 Mac OSX 10.4
I hope you find this useful. I’ve just noticed that Roger Johansson has updated his “Styling form controls” article which shows how individual CSS styles render on a range of form elements.
Sorry if I missed out your browser or operating system, I thought 40 variants would be enough!
For the record, these screens were put together with the fantastic service of Browsercam. Go and check it out and be sure to let them know I sent you if you sign up!