<html>
<head>
<style>
html body{
background-color:#C6EDFF;
font-family: 'Enriqueta',Sans-Serif;
padding-bottom: 30px;
}
.button{
/*[ Position ]*/
margin:0 10px 50px 10px;
float:left;
left: 200px;
top:90px;
/* [ Botton ] */
position:relative;
height:50px;
width:50px;
cursor:pointer;
line-height:47px;
background-color:#f1f1f1;
text-align:center;
font-size:30px;
display:inline-block;
text-shadow:0px -1px 1px rgba(255,255,255,0.5);
color:#444;
/* Transitions */
-moz-transition:.1s ease-out;
-webkit-transition:.1s ease-out;
-o-transition:.1s ease-out;
-ms-transition:.1s ease-out;
-khtml-transition:.1s ease-out;
transition:.1s ease-out;
/* Shadows */
box-shadow:inset 0 0 5px 0 rgba(255,255,255,0.5);
-moz-box-shadow:inset 0 0 5px 0 rgba(255,255,255,0.5);
-ms-box-shadow:inset 0 0 5px 0 rgba(255,255,255,0.5);
-webkit-box-shadow:inset 0 0 5px 0 rgba(255,255,255,0.5);
-khtml-box-shadow:inset 0 0 5px 0 rgba(255,255,255,0.5);
-o-box-shadow:inset 0 0 5px 0 rgba(255,255,255,0.5);
/* Borders */
border-width:1px;
border-style:solid;
border-left-color:#777;
border-right-color:#777;
border-top-color:#999;
border-bottom:4px solid #555;
/* {{ No selectable }} */
user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-o-user-select:none;
-ms-user-select:none;
-khtml-user-select:none;
/*[{- Border radius -}]*/
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
-ms-border-radius:50px;
-khtml-border-radius:50px;
-o-border-radius:50px;
/* Gradient */
background-image:-moz-linear-gradient(top,transparent,rgba(0,0,0,0.2));
background-image:-webkit-linear-gradient(top,transparent,rgba(0,0,0,0.2));
background-image:-o-linear-gradient(top,transparent,rgba(0,0,0,0.2));
background-image:-khtml-linear-gradient(top,transparent,rgba(0,0,0,0.2));
background-image:-ms-linear-gradient(top,transparent,rgba(0,0,0,0.2));
background-image:linear-gradient(top,transparent,rgba(0,0,0,0.2));
}
.button:hover{
color:#333;
/*{Gradient}*/
background-image:-moz-linear-gradient(top,transparent,rgba(0,0,0,0.17));
background-image:-webkit-linear-gradient(top,transparent,rgba(0,0,0,0.17));
background-image:-ms-linear-gradient(top,transparent,rgba(0,0,0,0.17));
background-image:-khtml-linear-gradient(top,transparent,rgba(0,0,0,0.17));
background-image:-o-linear-gradient(top,transparent,rgba(0,0,0,0.17));
background-image:linear-gradient(top,transparent,rgba(0,0,0,0.17));
}
.button:active{
margin-top:4px;
color:#777;
border:1px solid #999;
box-shadow:inset 0 2px 2px 0 #000;
}
.text-shadow-negra{
text-shadow:-1px -1px 0 rgba(0,0,0,0.2);
}
.text-blanco{
text-shadow:0 0 5px #000;
color:#FFF;
}
.text-blanco:hover{
text-shadow:0 0 1px #fff;
color:#FFF;
font-size:32px;
}
.text-blanco:active{
color:#DDC;
}
.blue{
background-color:#659AE0;
border-color:#5981AF #5981AF #436796 #719CCE;
}
.red{
background-color:#C66;
border-color:#C66767 #AF5757 #AF5757 #A05D5D;
}
.green{
background-color:#82C43A;
border-color:#578720;
}
.yellow{
background-color:#fa0;
border-color:#9B9800;
}
.brown{
background-color:#594343;
border-color:#7C6262 #423F1B #3F3D28 #3F3D28;
}
.orange{
background-color:#f70;
border-color:#DB8A00 #DB8A00 #BA7500 #E89200;
}
</style>
</head>
<body>
<div id="white" class="button text-blanco">✵</div>
<div id="blue" class="button blue text-blanco text-shadow-negra">✰</div>
<div id="red" class="button red text-blanco text-shadow-negra">�</div>
<div id="green" class="button green text-blanco text-shadow-negra">✦</div>
<div id="yellow" class="button yellow text-blanco text-shadow-negra">✡</div>
<div id="brown" class="button brown text-blanco text-shadow-negra">✥</div>
<div id="orange" class="button orange text-blanco text-shadow-negra">†</div>
</body>
</html>
0 comments:
Post a Comment