GLOSSY BUTTON IN CSS3

Posted: August 24, 2012 in CSS 3

.btn-slide {
display: block;
font-family: ‘Georgia’,serif;
font-size: 0.8em;
font-style: italic;
height: 40px;
line-height: 40px;
margin: 40px auto 0;
text-align: center;
width: 120px;
}
.button {
-moz-transition: background 0.2s ease-in-out 0s;
-moz-user-select: none;
background-color: #BFBFBF;
background-image: -moz-radial-gradient(center top , ellipse farthest-corner, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%), url(“images/noise.png”);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 8px 8px 8px 8px;
border-top: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 0.3em 0.3em rgba(255, 254, 255, 0.6) inset, 0 -0.1em 0.3em rgba(0, 0, 0, 0.15) inset, 0 0.1em 3px #999999, 0 0.3em 1px #727272, 0 0.5em 5px rgba(0, 0, 0, 0.2);
position: relative;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.button:hover {
-moz-transition: all 500ms ease-in 0s;
background-color: #D3D3D3;
}
.button.green {
background: none repeat scroll 0 0 rgba(215, 224, 193, 0.7);
box-shadow: 0 0.3em 0.3em rgba(255, 254, 255, 0.4) inset, 0 -0.1em 0.3em rgba(0, 0, 0, 0.05) inset, 0 0.1em 3px #C6C38D, 0 0.3em 1px rgba(144, 141, 77, 0.6), 0 0.5em 5px rgba(0, 0, 0, 0.2);
color: #7C773B;
}
.button.green:hover {
background: none repeat scroll 0 0 #D6D39D;
}
.skew {
border-radius: 5em 1em 5em 1em;
border-top: medium none;
padding-left: 0.8em;
padding-right: 1.2em;
}
.skew.glossy:after {
border-radius: 5em 1em 5em 1em;
left: 0;
}
.button.glossy:after {
background-image: -moz-linear-gradient(left center , rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.5));
content: “”;
height: 80%;
left: 5%;
position: absolute;
top: 0;
width: 90%;
}
.button.glossy:active:after {
opacity: 0.6;
}

IN HTML :-
apply div class=”slide”

In A tag :- class=”btn-slide button green skew glossy” href=”#”>Click to search

Advertisements

Comments are closed.