CSS 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
- CSS 3 – No images for me
- Assets for the CSS button ( 1 . 1 kb)
- Assets for the image button ( 2 . 0 kb)
- Top Tips
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;}
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.
- http://www.css3generator.com
- http://www.colorzilla.com/gradient-editor
- http://www.css3maker.com
- http://www.onlycssmenu.com
- http://www.colorpicker.com
- http://gridcalculator.dk
Leave a comment
