9 styles CSS3 gradient button set, 9 styles css3 gradient
<! DOCTYPE html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> CSS3 3D gradient button Code </title>
<Style>
Body
{
Background: # e5e5e5;
Text-align: center;
}
. Button
{
Margin: 10px;
Text-decoration: none;
Font: bold 1.5em 'trebuchet Ms', Arial, Helvetica;/* Change the em value to scale the button */
Display: inline-block;
Text-align: center;
Color: # fff;
Border: 1px solid # 9c9c9c;
Border: 1px solid rgba (0, 0, 0, 0.3 );
Text-shadow: 0 1px 0 rgba (0, 0, 0, 0.4 );
Box-shadow: 0 0. 05em rgba (0, 0, 0, 0.4 );
-Moz-box-shadow: 0 0. 05em rgba (0.4, 0 );
-Webkit-box-shadow: 0 0. 05em rgba (0.4, 0 );
}
. Button,. button span
{
-Moz-border-radius:. 3em;
Border-radius:. 3em;
}
. Button span
{
Border-top: 1px solid # fff;/* Fallback style */
Border-top: 1px solid rgba (255,255,255, 0.5 );
Display: block;
Padding: 0.5em 2.5em;
Background-image:-webkit-gradient (linear, 0 0,100% 100%, color-stop (. 25, rgba (0, 0, 0, 0.05), color-stop (. 25, transparent), to (transparent )),
-Webkit-gradient (linear, 0 100%, 100% 0, color-stop (. 25, rgba (0, 0, 0, 0.05), color-stop (. 25, transparent), to (transparent )),
-Webkit-gradient (linear, 0 0,100% 100%, color-stop (. 75, transparent), color-stop (. 75, rgba (0, 0, 0, 0.05 ))),
-Webkit-gradient (linear, 0 100%, 100% 0, color-stop (. 75, transparent), color-stop (. 75, rgba (0, 0, 0, 0.05 )));
Background-image:-moz-linear-gradient (45deg, rgba (0, 0, 0, 0.05) 25%, transparent 25%, transparent ),
-Moz-linear-gradient (-45deg, rgba (0, 0, 0, 0.05) 25%, transparent 25%, transparent ),
-Moz-linear-gradient (45deg, transparent 75%, rgba (0, 0, 0, 0.05) 75% ),
-Moz-linear-gradient (-45deg, transparent 75%, rgba (0, 0, 0, 0.05) 75% );
-Moz-background-size: 3px 3px;
-Webkit-background-size: 3px 3px;
}
. Button: hover
{
Box-shadow: 0 0. 1em rgba (0, 0, 0, 0.4 );
-Moz-box-shadow: 0 0. 1em rgba (0.4, 0 );
-Webkit-box-shadow: 0 0. 1em rgba (0.4, 0 );
}
. Button: active
{
Position: relative;
Top: 1px;
}
. Button-khaki
{
Background: # A2B598;
Background:-webkit-gradient (linear, left top, left bottom, from (# BDD1B4), to (# A2B598 ));
Background:-moz-linear-gradient (-90deg, # BDD1B4, # A2B598 );
Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '# BDD1B4', EndColorStr = '# A2B598 ');
}
. Button-khaki: hover
{
Background: # BDD1B4;
Background:-webkit-gradient (linear, left top, left bottom, from (# A2B598), to (# BDD1B4 ));
Background:-moz-linear-gradient (-90deg, # A2B598, # BDD1B4 );
Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '# A2B598', EndColorStr = '# BDD1B4 ');
}
. Button-khaki: active
{
Background: # A2B598;
}
. Button-blue
{
Background: #4477a1;
Background:-webkit-gradient (linear, left top, left bottom, from (# 81a8cb), to (#4477a1 ));
Background:-moz-linear-gradient (-90deg, # 81a8cb, #4477a1 );
Filter: progid: DXImageTransform. Microsoft. gradient (GradientType = 0, startColorstr = '# 81a8cb', endColorstr = '#4477a1 ');
}
. Button-blue: hover
{
Background: # 81a8cb;
Background:-webkit-gradient (linear, left top, left bottom, from (#4477a1), to (# 81a8cb ));
Background:-moz-linear-gradient (-90deg, #4477a1, # 81a8cb );
Filter: progid: DXImageTransform. Microsoft. gradient (GradientType = 0, startColorstr = '#4477a1', endColorstr = '# 81a8cb ');
}
. Button-blue: active
{
Background: #4477a1;
}
. Button-brown
{
Background: #8f3714;
Background:-webkit-gradient (linear, left top, left bottom, from (# bf6f50), to (#8f3714 ));
Background:-moz-linear-gradient (-90deg, # bf6f50, #8f3714 );
Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '# bf6f50', EndColorStr = '#8f3714 ');
}
. Button-brown: hover
{
Background: # bf6f50;
Background:-webkit-gradient (linear, left top, left bottom, from (#8f3714), to (# bf6f50 ));
Background:-moz-linear-gradient (-90deg, #8f3714, # bf6f50 );
Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '#8f3714', EndColorStr = '# bf6f50 ');
}
. Button-brown: active
{
Background: #8f3714;
}
. Button-green
{
Background: #428739;
Background:-webkit-gradient (linear, left top, left bottom, from (# c8dd95), to (#428739 ));
Background:-moz-linear-gradient (-90deg, # c8dd95,# 428739 );
Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '# c8dd95', EndColorStr = '#428739 ');
}
. Button-green: hover
{
Background: # c8dd95;
Background:-webkit-gradient (linear, left top, left bottom, from (#428739), to (# c8dd95 ));
Background:-moz-linear-gradient (-90deg, #428739, # c8dd95 );
Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '#428739', EndColorStr = '# c8dd95 ');
}
. Button-green: active
{
Background: #428739;
}
. Button-red
{
Background: # D82741;
Background:-webkit-gradient (linear, left top, left bottom, from (# E84B6E), to (# D82741 ));
Background:-moz-linear-gradient (-90deg, # E84B6E, # D82741 );
Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '# E84B6E', EndColorStr = '# D82741 ');
}
. Button-red: hover
{
Background: # E84B6E;
Background:-webkit-gradient (linear, left top, left bottom, from (# D82741), to (# E84B6E ));
Background:-moz-linear-gradient (-90deg, # D82741, # E84B6E );
Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '# D82741', EndColorStr = '# E84B6E ');
}
. Button-red: active
{
Background: # D82741;
}
. Button-purple
{
Background: #6F50E7;
Background:-webkit-gradient (linear, left top, left bottom, from (# B8A9F3), to (#6F50E7 ));
Background:-moz-linear-gradient (-90deg, # B8A9F3, #6F50E7 );
Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '# B8A9F3', EndColorStr = '#6F50E7 ');
}
. Button-purple: hover
{
Background: # B8A9F3;
Background:-webkit-gradient (linear, left top, left bottom, from (#6F50E7), to (# B8A9F3 ));
Background:-moz-linear-gradient (-90deg, #6F50E7, # B8A9F3 );
Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '#6F50E7', EndColorStr = '# B8A9F3 ');
}
. Button-purple: active
{
Background: #6F50E7;
}
. Button-black
{
Background: #141414;
Background:-webkit-gradient (linear, left top, left bottom, from (#656565), to (#141414 ));
Background:-moz-linear-gradient (-90deg, #656565, #141414 );
Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '#656565', EndColorStr = '#141414 ');
}
. Button-black: hover
{
Background: #656565;
Background:-webkit-gradient (linear, left top, left bottom, from (#141414), to (#656565 ));
Background:-moz-linear-gradient (-90deg, #141414, #656565 );
Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '#141414', EndColorStr = '#656565 ');
}
. Button-black: active
{
Background: #141414;
}
. Button-orange
{
Background: # f09c15;
Background:-webkit-gradient (linear, left top, left bottom, from (# f8c939), to (# f09c15 ));
Background:-moz-linear-gradient (-90deg, # f8c939, # f09c15 );
Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '# f8c939', EndColorStr = '# f09c15 ');
}
. Button-orange: hover
{
Background: # f8c939;
Background:-webkit-gradient (linear, left top, left bottom, from (# f09c15), to (# f8c939 ));
Background:-moz-linear-gradient (-90deg, # f09c15, # f8c939 );
Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '# f09c15', EndColorStr = '# f8c939 ');
}
. Button-orange: active
{
Background: # f09c15;
}
. Button-silver
{
Background: # c5c5c5;
Background:-webkit-gradient (linear, left top, left bottom, from (# eaeaea), to (# c5c5c5 ));
Background:-moz-linear-gradient (-90deg, # eaeaea, # c5c5c5 );
Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '# eaeaea', EndColorStr = '# c5c5c5 ');
}
. Button-silver: hover
{
Background: # eaeaea;
Background:-webkit-gradient (linear, left top, left bottom, from (# c5c5c5), to (# eaeaea ));
Background:-moz-linear-gradient (-90deg, # c5c5c5, # eaeaea );
Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '# c5c5c5', EndColorStr = '# eaeaea ');
}
. Button-silver: active
{
Background: # c5c5c5;
}
</Style>
</Head>
<Body>
<Div> http://www.999jiujiu.com/</div>
<H1> Cross-browser CSS gradient buttons <A href = "#" class = "button-khaki"> <span> Button </span> </a>
<A href = "/" class = "button-blue"> <span> Button </span> </a>
<A href = "#" class = "button-brown"> <span> Button </span> </a>
<Br>
<A href = "#" class = "button-red"> <span> Button </span> </a>
<A href = "#" class = "button-purple"> <span> Button </span> </a>
<A href = "#" class = "button-green"> <span> Button </span> </a>
<Br>
<A href = "#" class = "button-black"> <span> Button </span> </a>
<A href = "#" class = "button-orange"> <span> Button </span> </a>
<A href = "#" class = "button-silver"> <span> Button </span> </a>
</Body>
</Html>