SEO Juice - Home

CSS 3 Buttons

Replace image buttons with pure CSS3

Online SEO tools Off page  SEO advice On page SEO advice

CSS 3 ButtonsCSS 3 Buttons

The purpose of this article is to show you to use CSS3 to make buttons rather than using images and additional HTTP requests.

Sections in this article


Introduction

You’re probably asking yourself what CSS3 buttons have to do with on page SEO? Well the tedious link is graphics are large in size, slow the page down and with speed playing a part in Google’s search algorthym, could quite possibly lose you a place in the rankings.

So, read on to see how you can get rid of images for lots of pretty lines of CSS!


CSS 3 – No images for me

Where possible use CSS and CSS3 rather than images. If you have a large site then you could save yourself creating a load of unecessary images and HTTP requests. And, once you have everything coded in CSS3, it's there to use throughout your whole site and on future projects.

Take a look at the image button below. It involves a PNG24 image sprite with the size of 1.5kb and 0.5kb of CSS code to generate it, 2.0kb in total with 1 additional HTTP request.

Now take a look at the CSS button below. It involves a few lines of CSS3 code with the size of 1.1kb in total with 0 additional HTTP requests. Almost a 50% decrease in overhead.

Image Button CSS Button



Assets for the CSS button (1.1kb)


.css3-demo-button {height:23px; width:70px; padding:0px 0px 0px 23px; float:left; margin-top:7px; color:#FFF!important; font-size:10px; border:solid 3px #fff;background: #660000;background: -moz-linear-gradient(top, #660000 0%, #c82120 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#660000), color-stop(100%,#c82120));background: -webkit-linear-gradient(top, #660000 0%,#c82120 100%); background: -o-linear-gradient(top, #660000 0%,#c82120 100%); }

.css3-demo-button:hover {background-color:#f6a038; color:#FFC;background: #ff3333;background: -moz-linear-gradient(top, #ff3333 0%, #660000 99%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3333), color-stop(99%,#660000));background: -webkit-linear-gradient(top, #ff3333 0%,#660000 99%);background: -o-linear-gradient(top, #ff3333 0%,#660000 99%); }

.demoboxshadow {-webkit-box-shadow: 0px 0px 3px 2px #AAA;-moz-box-shadow: 0px 0px 3px 2px #AAA;box-shadow: 0px 0px 3px 2px #AAA; behavior: url(/assets/PIE.htc);}

.demoround {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior: url(/assets/PIE.htc);}



Assets for the image button (2.0kb)


.css3-demo {height:32px; width:110px; background:url(/assets/images/article-images/css-button-example.png) no-repeat 0px 0px; padding:8px 0px 0px 23px; float:left; margin-top:2px; color:#FFF!important; font-size:10px; float:left;}

.css3-demo:hover {height:32px; width:110px; background:url(/assets/images/article-images/css-button-example.png) no-repeat 0px -40px; padding:8px 0px 0px 23px; float:left; margin-top:2px; color:#FFC!important;}


Image button asset

 

Top Tips

Create yourself a code library of all your CSS3 snippets that you can reuse over and over again. CSS & CSS3 can be quite complex to format but there are many websites out there that can give you a helping hand. I have listed a few of them for you below.


Leave a comment


Keyword density

Increase keyword density
in your pages and see
how to monitor it.

Show me
Create an RSS feed

Understand the power of
RSS and your social media
efforts will be made easier!
Show me

Page Speed

Are your website visitors
having to wait more
than 2 seconds for
your pages to load?

Show me
CSS 3 Buttons

Graphics are large in size
and slow the page down,
CSS3 is faster!

Show me
Articles

My SEO ramblings can
be found here as and
when I have something
to say.

Show me
Get your domain name here