embossed button styles

embossed button styles

by Pavlo

HTML

<div>
<a href="#" class="embossed-heavy">
			<i class="g-display-option-button icon-mail-forward"></i>
			<span>Hover/Click me</span>
</a>
</div>

CSS

a {
  padding:10px  
}
div {
  padding:20px
}
a, div{
    color: white;
    outline: 0;
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(#00a8e1), to(#00a8e1));
    background-image: -webkit-linear-gradient(top, #00a8e1, 0%, #00a8e1, 100%);
    background-image: -moz-linear-gradient(top, #00a8e1 0%, #00a8e1 100%);
    background-image: linear-gradient(to bottom, #00a8e1 0%, #00a8e1 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00a8e1', endColorstr='#ff00a8e1', GradientType=0);
    background-color: #00a8e1;
}

.embossed-heavy:hover, .embossed-heavy:focus {
    color: white;
    -webkit-box-shadow: inset 2px 2px 0 #15c4ff, inset -2px -2px 0 #0082ae;
    box-shadow: inset 2px 2px 0 #15c4ff, inset -2px -2px 0 #0082ae;
}

.embossed-heavy:active, .dropdown.open .embossed-heavy, .pressed.embossed-heavy, .embossed-heavy.popover-shown {
    color: white;
    -webkit-box-shadow: inset 2px 2px 0 #0082ae, inset -2px -2px 0 #15c4ff;
    box-shadow: inset 2px 2px 0 #0082ae, inset -2px -2px 0 #15c4ff;
}