Css3 Rounded Buttons

Nice post ☆ : Rounded Button Dengan Css

    

Nice post ☆ : Sebelumnya Nice post Memposting Simple Css Loaders,kali ini saya akan memberikan Trik membuat tombol Versi permainan pokker yaitu Rounded Button With Css atau Tombol dengan.

Perhatikan Kode bawah ini :

Kode CSS : Kode Css sangatlah simple untuk di pelajari dan di kembangkan,seperti yang ada di bawah ini [Credit=cssdeck.com].

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;
}

Untuk mengaktifkan kode css di atas kita memerlukan sebuah pemanggil yaitu  HTML :

Seperti yg di bawah ini.

<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>

Untuk Melihat klik Demo : 

  Css Demo