<html>
<head>
<style>
body{
background-image: -webkit-linear-gradient(LEFT,#aaa, #ccc, #aaa);
}
.buttonHolder{
margin:80px auto;
width:500px;
}
.button{
background-image: -webkit-linear-gradient(top, #f4f1ee, #fff);
background-image: linear-gradient(top, #f4f1ee, #fff);
border-radius: 50%;
box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
float:left;
height: 70px;
margin: 0 30px 30px 0;
position: relative;
width: 70px;
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.button:after{
color:#e9e6e4;
content: "";
display: block;
font-size: 30px;
height: 30px;
text-decoration: none;
text-shadow: 0px -1px 1px #bdb5b4, 1px 1px 1px white;
position: absolute;
width: 30px;
}
.btn1:after{
content: "S";
left: 24px;
top: 19px;
}
.btn2:after{
content: "U";
left:23px;
top:20px;
}
.btn3:after{
content: "R";
left: 21px;
top: 21px;
}
.btn4:after{
content: "Y";
left: 23px;
top: 19px;
}
.btn5:after{
content: "A";
left: 23px;
top: 19px;
}
.button:hover{
background-image: -webkit-linear-gradient(top, #fff, #f4f1ee);
background-image: linear-gradient(top, #fff, #f4f1ee);
color:#0088cc;
}
.btn1:hover:after{
color:#eb2f2f;
text-shadow:0px 0px 6px #eb2f2f;
}
.btn2:hover:after{
color:#83d244;
text-shadow:0px 0px 6px #83d244;
}
.btn3:hover:after{
color:#000;
text-shadow:0px 0px 6px #000;
}
.btn4:hover:after{
color:#f99e4e;
text-shadow:0px 0px 6px #f99e4e;
}
.btn5:hover:after{
color:#00F;
text-shadow:0px 0px 6px #00F;
}
.button:active{
background-image: -webkit-linear-gradient(top, #efedec, #f7f4f4);
background-image: linear-gradient(top, #efedec, #f7f4f4);
box-shadow: 0 3px 5px 0 rgba(0,0,0,.4), inset 0px -3px 1px 1px rgba(204,198,197,.5);
}
.button:active:after{
color:#dbd2d2;
text-shadow: 0px -1px 1px #bdb5b4, 0px 1px 1px white;
}
</style>
</head>
<body>
<div class="buttonHolder">
<a href="#" class="button btn1"></a>
<a href="#" class="button btn2"></a>
<a href="#" class="button btn3"></a>
<a href="#" class="button btn4"></a>
<a href="#" class="button btn5"></a>
</div>
</body>
</html>
0 comments:
Post a Comment