Glossy Css3 buttons

by Guna 2011-06-15 11:13:03



.css3-button {

position:relative;

display:inline-block;

width:8em;

padding:0.25em 0.5em 0.3em 0.5em;

text-align:center;

cursor : pointer;

border:2px solid #999;

background-color:#666;

background-color:rgba(128,128,128,0.75);

-moz-border-radius:16px;

-webkit-border-radius:16px;

-opera-border-radius:16px;

-khtml-border-radius:16px;

border-radius:16px;

font-size:1.5em;

color:#fff;

font-weight:bold;

text-shadow:1px 1px 3px rgba(0,0,0,0.5);

background-image:-webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(64,64,64,0.75)), to(rgba(192,192,192,0.9)));

background-image:-moz-linear-gradient(top,bottom,from(rgba(64,64,64,0.75)), to(rgba(192,192,192,0.9)));

-khtml-box-shadow:rgba(192,192,192,0.75) 0px 8px 24px;

-moz-box-shadow:rgba(192,192,192,0.75) 0px 8px 24px;

box-shadow:rgba(192,192,192,0.75) 0px 8px 24px;

}

.css3-button span {

position:absolute;

display:block;

width:94%;

left:3.5%;

top:0px;

height:50%;

-webkit-border-radius:8px;

-moz-border-radius:8px;

background-color:rgba(255,255,255,0.25);

background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.75)), to(rgba(255,255,255,0)));

background-image:-moz-linear-gradient(top,bottom,from(rgba(255,255,255,0.75)), to(rgba(255,255,255,0)));

}

#shiny-blue {

border-color:#6699cc;

background-color:rgba(64,128,192,0.75);

background-image:-webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(16,96,192,0.75)), to(rgba(96,192,255,0.9)));

background-image:-moz-linear-gradient(top,bottom,from(rgba(16,96,192,0.75)), to(rgba(96,192,255,0.9)));

-khtml-box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;

-moz-box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;

box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;

}

#shiny-blue:hover {

border-color:#003575;

background-color:rgba(0,97,216,0.75);

background-image:-webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(0,97,216,0.75)), to(rgba(0,53,117,0.9)));

background-image:-moz-linear-gradient(top,bottom,from(rgba(0,97,216,0.75)), to(rgba(0,53,117,0.9)));

-khtml-box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;

-moz-box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;

box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;

margin: 0 5px 0 5px;

Usage
No Images!!

Tagged in:

1002
like
0
dislike
0
mail
flag

You must LOGIN to add comments