Membuat Tombol dengan Css

Tombol merupakan kebutuhan disuatu website, di setiap website atau blog pasti terdapat tombol entah satu ataupun dua... Nah kali ini saya ingin berbagi cara membuat tombol menggunakan css, dengan cara ini sangatlah mudah dan akan terkesan bagus tinggal kreatifitas anda.

Contoh tombol pertama :

Kode Html

<input id="myButtonSatu" type="submit" value="Download"/>

Disini saya mengambil input sebagai tagnya. Anda bisa saja memakai button atau div,dan sebagainya. Tinggal kemauan anda.

Kode Css

#myButtonSatu{
color:black;
font-weight:bold;
border:1px solid #eb5230;
box-shadow: 0px 3px 5px #555555;
cursor: pointer;
 -webkit-border-radius:10px 10px 10px 10px;
-o-border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
-ms-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
/* backCOlor */
  background-color: #eb5200;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eb5200), to(#fff));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #fff, #eb5200);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #fff, #eb5200);

  /* IE 10 */
  background: -ms-linear-gradient(top, #fff, #eb5200);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #fff, #eb5200);
}
#myButtonSatu:hover{box-shadow: 0px 2px 3px #555555;}

Contoh Tombol Kedua :

Kode Html

<button id="myButtonDuaDemo">Demo</button>
<button id="myButtonDuaDownload">Download</button>

Kode Css

#myButtonDuaDemo{
color:black; font-weight:bold;
border:1px solid #eb5230;
box-shadow: 0px 3px 5px #555555; cursor: pointer;
-webkit-border-radius:10px 0px 0px 10px;
-o-border-radius:10px 0px 0px 10px;
-moz-border-radius:10px 0px 0px 10px;
-ms-border-radius:10px 0px 0px 10px;
border-radius:10px 0px 0px 10px;
/* backCOlor */
  background-color: #eb5200;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eb5200), to(#fff));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #fff, #eb5200);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #fff, #eb5200);

  /* IE 10 */
  background: -ms-linear-gradient(top, #fff, #eb5200);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #fff, #eb5200);}
#myButtonDuaDemo:hover{box-shadow: 0px 2px 5px #555555; background: #eb5200;}

#myButtonDuaDownload{
margin-left:-1px;
color:black;
font-weight:bold;
border:1px solid #eb5230;
box-shadow: 0px 3px 5px #555555;
cursor: pointer;
-webkit-border-radius:0px 10px 10px 0px;
-o-border-radius:0px 10px 10px 0px;
-moz-border-radius:0px 10px 10px 0px;
-ms-border-radius:0px 10px 10px 0px;
border-radius:0px 10px 10px 0px;
/* fallback */
  background-color: #eb5200;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eb5200), to(#fff));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #fff, #eb5200);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #fff, #eb5200);

  /* IE 10 */
  background: -ms-linear-gradient(top, #fff, #eb5200);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #fff, #eb5200);}
#myButtonDuaDownload:hover{box-shadow: 0px 2px 5px #555555; background: #eb5200;}

Contoh Tombol ke tiga :

Kode Html

<button id="myButtonTiga">Read more</button>

Kode Css

#myButtonTiga{
background:#f7f7f7;
color:#555555;
text-shadow:3px 3px 5px #ccc;
font-weight:bold;
border:1px solid #ccc;
cursor: pointer;
padding:5px;
}
 #myButtonTiga:hover{
background:#eb5200;
color:#fff;
text-shadow:3px 3px 5px #555555;
box-shadow: 0px 3px 5px #555555;
border:1px solid #eb5200;}

Keterangan :
Seperti di posting sebelumnya border-radius itu yang membuat tombol bisa melengkung. Semakin besar pixel atau persen ukurannya semakin melengkung.
Hover yang terdapat di dalam kode css itu adalah jika tombol itu disorot oleh mouse maka akan terjadi seperti yang diperintahkan di kode setelah hover

Gimana teman-teman?cukup mudah bukan?
Sekian pembuatan tombol dengan css ini.Kurang lebihnya mohon maaf. Semoga bermanfaat dan jika ada yang kurang jelas silahkan ditanyakan.