Pure CSS Buttons to Help with Pageload Speed

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;

Call to Action

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.