Gradient Buttons with CSS3

, , Leave a comment

In my previous post I explain about CSS Shadows. Today I’m going to explaion you about CSS3 gradient feature in a good practical use. I will explain gradient button that I have created with CSS3. The buttons are scalable based on  the font-size. The button size can be easily adjusted by changing the padding and font-size values. It can be applied to any HTML element such as div, span, p, a, button, input, etc.

The Button

The image below shows what we are looking at

 

HTML Code

{code}

<body style=”background-color:#003247″>
<div class=”button”> CSS3 Gradient Button</div>
</body>

{/code}

CSS Code

The Code below CSS style for button background. The first background line is for Webkit browsers, the second line is for Firefox, and the third line is a gradient filter that is only read by Internet Explorer.

{code}

.button

{

background: -webkit-gradient(linear, left top, left bottom, from(#ff9e00), to(#ed6a0a));

background: -moz-linear-gradient(top,  #ff9e00,  #ed6a0a);

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff9e00′, endColorstr=’#ed6a0a’);

display: inline-block;

padding: 5px 10px 6px;

color: #fff;

text-decoration: none;

font-weight: bold;

}
{/code}

 

The Code below CSS style for button Border and shadow. For more details on borders and shadows, read my article CSS3 Exciting Border Functions and Features and CSS3 Exciting Shadows

{code}
.button
{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0 2px 5px #00090d;
-webkit-box-shadow: 0 2px 5px #00090d;
text-shadow: 0 -1px 1px #00090d; cursor: pointer;
}
{/code}

Complete CSS Code

{code}
.button
{
background: -webkit-gradient(linear, left top, left bottom, from(#ff9e00), to(#ed6a0a));
background: -moz-linear-gradient(top,  #ff9e00,  #ed6a0a);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff9e00′, endColorstr=’#ed6a0a’);
display: inline-block;

padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0 2px 5px #00090d;
-webkit-box-shadow: 0 2px 5px #00090d;
text-shadow: 0 -1px 1px #00090d;
cursor: pointer;
}
{/code}

Share this: