<! DOCTYPE html>
<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,0,0,0.4);
-webkit-box-shadow:0 0.05em Rgba (0,0,0,0.4);
}
. 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 (. Rgba (0, 0, 0, 0.05)), Color-stop (. Transpare NT), to (transparent)),
-webkit-gradient (linear, 0 100%, 100% 0, Color-stop (.), Rgba (0, 0, 0, 0.05)), color-stop (. Transparent), to (Transparen T)),
-webkit-gradient (linear, 0 0, 100% 100%, Color-stop (., transparent), color-stop (.), Rgba (0, 0, 0, 0.05)),
-webkit-gradient (linear, 0 100%, 100% 0, Color-stop (., transparent), color-stop (.), 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,0,0,0.4);
-webkit-box-shadow:0 0.1em rgba (0,0,0,0.4);
}
. 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>
<body>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
<a href= "#" class= "button Button-khaki" ><span>Button</span></a>
<a href= "/" class= "button Button-blue" ><span>Button</span></a>
<a href= "#" class= "button Button-brown" ><span>Button</span></a>
<br>
<a href= "#" class= "button button-red" ><span>Button</span></a>
<a href= "#" class= "button Button-purple" ><span>Button</span></a>
<a href= "#" class= "button Button-green" ><span>Button</span></a>
<br>
<a href= "#" class= "button Button-black" ><span>Button</span></a>
<a href= "#" class= "button Button-orange" ><span>Button</span></a>
<a href= "#" class= "button Button-silver" ><span>Button</span></a>
</body>
9 styles CSS3 set of gradient buttons