A recurring theme in my travels down the well-worn road of web design is the constant tussle between design and functionality. On the one hand, you want a submit button to be a input type=”submit”: it’s semantically correct and has the desired effect when pressed. On the other hand, the designer who’s mocked up your web form wants it to look like a shiny glass, button, with slightly bevelled text and a semi-transparent shadow.
This, again is where CSS is your friend. Being able to create semantically correct markup with pleasing design can go hand in hand.
I know you could use input type=”image”, but it’s not quite the same: you need a separate image for each button, whereas the following method allows you to specify input[type=submit] in your CSS and forget about it (using, of course, the wonderful Selectivizr to allow you to select elements based on attributes in non-supporting browsers).
Here’s the code I’ve used for the following submit button:
Style:
input[type=submit] {
cursor:pointer;
color:#fff;
color:rgba(255,255,255,.9);
background:#333;
background:-webkit-gradient(linear, left bottom, left top, from(#000), color-stop(0.50, #000), color-stop(0.51, #3e3e3e), to(#7d7d7d)) center top no-repeat #333;
background:-moz-linear-gradient(bottom center, #000, #000 50%, #3e3e3e 51%, #7d7d7d) center top no-repeat #333;
border:1px solid #2c2c2c;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
-webkit-box-shadow:0 1px 1px rgba(255,255,255,.6), 0 -1px 1px rgba(0,0,0,.6);
-moz-box-shadow:0 1px 1px rgba(255,255,255,.6), 0 -1px 1px rgba(0,0,0,.6);
box-shadow:0 1px 1px rgba(255,255,255,.6), 0 -1px 1px rgba(0,0,0,.6);
text-shadow:0 -1px 1px rgba(47,47,47,.6), 1px 1px 1px rgba(244,244,244,.6);
padding:4px 12px;
}
Markup:
<input type="submit" />
Here’s how it appears in a few browsers:
Internet Explorer 9
Safari 5
Internet Explorer 6 (I know, but at least you can see it, right?)
Google Chrome 9
Mozilla Firefox 3.6
I’ve built in a fair amount of redundancy to ensure cross-browser compatability and to take advantage of as many CSS3 techniques as possible. So how’s it done?
Background Gradient: Using CSS gradients is great – they’re native, quicker to load (although a 2KB png probably wouldn’t hurt) and pretty versatile. Webkit and Mozilla use different notations for gradients, so you’ll have to write it twice. I believe there’s an IE filter that does something similar.
Rounded corners: Ah, the Web 2.0 designer’s favourite technique: rounded corners. So ubiquitous it’s included in the CSS3 specification.
Text Shadow: Fantastic for creating the illusion of depth by giving a faux bevelled edge to the text
Box Shadow: Again, it has to be declared in both Webkit and Mozilla forms (and I’ve included the vendor-prefixless version there too. Another designer favourite, giving shadows to the box can lift it off the page or, as in this case, give it a harder, chiselled look. Simply keep the third declaration (the ‘spread’ of the shadow) down to 0 or 1px.
RGBA text: I love RGBA colour. For those who are asking, the ‘A’ stands for Alpha, and is the level of opacity. I’ve told the text to be 0.9 percent opaque white (255,255,255 are the red, green and blue values for white). In the browsers that support it, it can really enhance your text and lift them off the page.
And with a little enhancement you can get some great text effects (uses jQuery for the movement effects).
So, a simple trick that allows you to make sure your designer goes home happy, and your client gets a quick-loading, enhanced website.