PE

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).

(more…)