♪
☺
♥
♣
♀
♂
♠
♦
html body{
background-color:#C6EDFF;
font-family: 'Enriqueta',Sans-Serif;
min-width:100%;
min-height:100%;
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;
/*{Shadow}*/
box-shadow:inset 0 0 5px 0 #333;
-moz-box-shadow:inset 0 0 5px 0 #333;
-webkit-box-shadow:inset 0 1px 2px 0 #333, 0 1px 1px 0 #fff;
}
.text-shadow-negra{
text-shadow:-1px -1px 0 rgba(0,0,0,0.2);
}
.text-blanco{
color:#F2F2F2;
}
.text-blanco:hover{
color:#DDD;
}
.text-blanco:active{
color:#DDC;
}
.blue{
background-color:#659AE0;
border-bottom-color:#436796;
border-left-color:#5981AF;
border-right-color:#5981AF;
border-top-color:#719CCE;
}
.red{
background-color:#C46A6A;
border-bottom-color:#A05D5D;
border-left-color:#AF5757;
border-right-color:#AF5757;
border-top-color:#C66767;
}
.green{
background-color:#82C43A;
border-color:#578720;
}
.yellow{
background-color:#EFEC40;
border-color:#9B9800;
}
.brown{
background-color:#594343;
border-bottom-color:#423F1B;
border-right-color:#3F3D28;
border-left-color:#3F3D28;
border-top-color:#7C6262;
}
.black{
background-color:#555;
border-bottom-color:#444;
border-left-color:#666;
border-right-color:#666;
border-top-color:#777;
}
.orange{
background-color:#FAA407;
border-bottom-color:#BA7500;
border-left-color:#DB8A00;
border-right-color:#DB8A00;
border-top-color:#E89200;
}
<link rel="Stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Enriqueta">
<link rel="Stylesheet" type="text/css" href="http://devsarray.com.ar/hernan/reset.css">
<div id="white" class="button">♪</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="black" class="button black text-blanco text-shadow-negra">♠</div>
<div id="orange" class="button orange text-blanco text-shadow-negra">♦</div>
