CSS3 Buttons with Gradient and Background Image

If you read my last post CSS3 Buttons with Gradient and Shadow, you see how easy was it to use new CSS3 buttons in your web design without using any images. Sometimes you might find yourself in a situation when you like the gradients but still want to use some sort of a shape. e.g a little triangle next to the text. We can achieve this in two ways.

  1. Draw a shape using CSS3
  2. Use a background image
Option 1:
This option sounds good but there might be cases when you cannot apply this option. In order to use CSS3 to draw a shape you need to apply the styles to a container. Now if you have applied your gradient and shadow to an anchor tag (<a><a/>) or a div tag (<div></div>), you can insert another container within and apply CSS3 styles to it and position it wherever you like e.g
<a class="myGreenButton">
   My Green Button<span class="arrow"></span>
</a>

and then I define the arrow class as:

.arrow {
    height: 0px;
    width: 0px;
    border:5px solid;
    border-color:transparent transparent transparent #000;
    display:inline-block;
    margin-left:5px;
 
}

I’m using an arrow, you can draw all sorts of shapes using CSS3 border transparency feature. So now our whole CSS for the button would be as follows:

.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)
/*Remember to add these two lines for old IE versions, 

refer to my previous post for more details*/
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);
}

.arrow {
height: 0px;
width: 0px;
border:5px solid;
border-color:transparent transparent transparent #000;
display:inline-block;
margin-left:5px;

}

The button above looks nice but the problem is that sometime you might want to add the above effects to an input button field on your web site. We cannot enclose a container between <input></input> so the above option would not work. This is where you might want to use the second option. Now I’ll show you how to use a background image while keeping the background gradient on the button.

Option 2:

Below is the CSS you will need to incorporate the button in your web design:

.myGreenButton 
{
background: url('/img/buttons/btn-arrow.png') no-repeat;
background: url('/img/buttons/btn-arrow.png') no-repeat 100% 50%, 
-webkit-gradient(linear, 0 0, 0 bottom, from(#75C027),
to(#6EBB1F));
background: url('/img/buttons/btn-arrow.png') no-repeat 100% 50%,
-webkit-linear-gradient(#75C027, #6EBB1F);
background: url('/img/buttons/btn-arrow.png') no-repeat 100% 50%,
-moz-linear-gradient(#75C027, #6EBB1F);
background: url('/img/buttons/btn-arrow.png') no-repeat 100% 50%,
-ms-linear-gradient(#75C027, #6EBB1F);
background: url('/img/buttons/btn-arrow.png') no-repeat 100% 50%,
-o-linear-gradient(#75C027, #6EBB1F);
background: url('/img/buttons/btn-arrow.png') no-repeat 100% 50%,
linear-gradient(#75C027, #6EBB1F);
/*Remember to add these two lines for old IE versions, refer to my 
previous post for more details*/
-pie-background: url('/img/buttons/btn-arrow.png') no-repeat 100%
linear-gradient(#75C027, #6EBB1F);
behavior: url(/PIE.htc);
}

In case you are wondering why is there background: url(‘/img/buttons/btn-arrow.png’) no-repeat 100% 50% used repeatedly with every browser specific rule, if you use it just once it will not work, so you have insert it on every line. Try the CSS above and you will see a similar button as above but this time the arrow is a background image and we did not have to add and extra container for it.

FMR Web Design Boca Raton, Florida uses up-to-date web design technologies to enhance website performance. So please contact us if you need a professional website created.

Posted in CSS

Leave a Reply

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