CSS3 Buttons with Gradient and Shadow

So recently I have been using CSS3 on my websites. Ofcourse, there are still browser compatibility issues with this new version of CSS,  Chrome and Firefox have excellent support for CSS3 whereas IE literally sucks! But you can find some solutions out there that can help ease your pain. e.g. I use CSS3 PIE to make IE 6-9 capable of rendering some useful CSS3 features. Below I will show how you can easily incorporate CSS3 buttons in your website design.

So recently I was working on a website which had a lot of buttons with round corners and gradients. Before CSS3 I would usually use images for the corners and backgrounds but with CSS3 we can achieve this without using images. Below is the CSS for a round button with a gradient and shadow.

.myGreenButton {
  border: 1px solid #696;
  padding: 10px 0; 
  text-align: center;
  width: 200px;
 -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: #666 0px 2px 3px;
  -moz-box-shadow: #666 0px 2px 3px;
  box-shadow: #666 0px 2px 3px;
  background: #EEFF99;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
  background: -webkit-linear-gradient(#EEFF99, #66EE33);
  background: -moz-linear-gradient(#EEFF99, #66EE33);
  background: -ms-linear-gradient(#EEFF99, #66EE33);
  background: -o-linear-gradient(#EEFF99, #66EE33);
  background: linear-gradient(#EEFF99, #66EE33);
}

So after you apply the class above to any container e.g a div, see below:

<div class="myGreenButton">My Green Button</div>

you will achieve a nice rounded button with a gradient and a shadow like this:

All that without having to use any images at all. How awesome is that!? Now as I mentioned earlier, you would see these effects in IE 6-8, so lets use CSS3 PIE. Go to the website and you will see the download link on the right side. After you have downloaded the file, you put the PIE.htc file anywhere in your website. I usually keep mine in the stylesheets folder. Then you add the following line to your existing CSS.

behavior: url(YourPath/PIE.htc);
//Replace YourPath with the folder where you have placed PIE.htc
-pie-background: linear-gradient(#EEFF99, #66EE33);

So now your myGreenButton class would be:

border: 1px solid #696;
padding: 10px 0;
text-align: center;
width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);

So now if you check your buttons in older IE versions you will see the same effect.

Hope this post is helpful and helps you to incorporate CSS3 buttons in your web design. In my next post I will show you how you can use a background image along background gradients.

At FMR Web Design we make sure that we use up-to-date web design technologies to enhance website performance. So please contact us if you need any help with your website.

Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *