CSS of any version that goes up against any image of any size is generally going to win, there are an abundance of conversations out there about conversion rate optimization and how you should have your button this colour or this size, placed here or placed there for better opportunities to convert. That is a conversation for another day.
I wanted to take a closer look at using CSS to replicate these buttons without actually using an image. Why? Faster pageload speed, plain and simple.
Images and code bloat are the biggest drawbacks to how fast your pages load, we already knew that, but what if you could replace some of those images, those calls to action on your landing pages to load that little bit quicker? Well we can. Take the following example.
The CSS
.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #a4e271;
-webkit-box-shadow:inset 0px 1px 0px 0px #a4e271;
box-shadow:inset 0px 1px 0px 0px #a4e271;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0f2f22), color-stop(1, #0f2f22) );
background:-moz-linear-gradient( center top, #0f2f22 5%, #0f2f22 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f2f22', endColorstr='#0f2f22');
background-color:#89c403;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #74b807;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #528009;
}.myButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0f2f22), color-stop(1, #89c403) );
background:-moz-linear-gradient( center top, #0f2f22 5%, #89c403 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f2f22', endColorstr='#89c403');
background-color:#0f2f22;
}.myButton:active {
position:relative;
top:1px;
}
This will result in a generated CSS button like this;
Now using an image for the same effect will involve using sprites and result in at the very least an extra 4kb added to the load time as opposed to 2kb for the CSS version. The extra benefits of using CSS in this way are that you do not have to open an image editor every time you want to create a new button, it is all defined by using the class="myButton" and using whatever anchor text you would have used anyway.
Drawbacks
There are drawbacks to using this CSS method to creating your buttons this way in that versions of IE prior to Internet Explorer 9 can not handle -moz-border-radius and you end up with CSS buttons that are obviously not rounded off.
So there you have it, a very quick win for pageload speed. All credit for the code goes to CSS Button Generator for making my life so much easier.
Good post Dean, I’d just add one small point that IE wouldn’t support -moz-border-radius as that is a browser-specific declaration for Mozilla Firefox. Just as -webkit-border-radius is for Webkit-based browsers. IE9 supports border-radius instead, as shown here: http://ie.microsoft.com/testdrive/html5/borderradius/default.html. I’m all in favour of finding ways to speed up page loads, and CSS3 techniques are making this easier.
@Robin, yeah that’s one of the things I noticed as well and highlighted that in the post. IE9 and above does support it though, shame really, such a nice effect you would think it would be such a small update to ad it to IE7 and 8.
Cheers for the comment.
Google also takes into account how fast your page loads when they are determining your website page rank. So if your page loads a lot faster, Google likes it and your customer will like it as well.
Like all the other users out there, if a website takes too long to load, I just leave and probably never come back. So if you improve the load time with CSS then I’m all for it.