Membuat Tombol dengan Menggunakan CSS3

Mau tau cara membuat tombol dengan mudah tanpa menggunakan Photoshop ? Pasti pada mau semuanyakan ? Pada tutorial ini, mari kita bersama-sama mempelajari bagaimana membuat tombol dengan menggunakan CSS3 (CSS Versi 3).

Untuk membuatnya kita harus melakukan 3 langkah :

1. Mendefinisikan tombol sebagai elemen link.

.tombol{
 padding:5px 15px 5px 15px;
 text-decoration: none;
 display: inline-block;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 font-family: "Lucida Grande",Lucida,Verdana,sans-serif;
 outline:none;
 position:relative;
 font-size: 32px;
 margin:10px;
 background:transparent url(buttonover.png) repeat-x top left;
 white-space:nowrap;
 }
 .tombol:hover{
 background-color: #777;
 }
 .tombol:active{
 top: 1px;
 left:1px;
 }

2. Mendefinisikan style untuk tombol yang ingin dibuat.

.shadow{
background-color: #a3a3a3;
border: 2px solid #777;
color: #FFF;
font-weight:bold;
text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}
.engraved{
background: #666;
border: 2px solid #777;
color: #000;
text-shadow: 0px 1px 1px #fff;
font-weight: bold;
}
.glow{
color: #fff;
background: #888;
border: 2px solid #777;
text-shadow: 1px 1px 6px #fff;
}
.white{
color: #fff;
background: #fff;
text-shadow: 1px 1px 4px #000;
border: 2px solid #f0f0f0;
font-family: "Arial";
font-weight:bold;
text-transform:uppercase;
letter-spacing:-1px;
}
.white:hover{
background-color:#f1f1f1;
}
.red{
background-color: #B00000;
border: 1px solid #7F0000;
color: #FFF;
text-shadow: 1px 1px 4px #000;
font-family: "Palatino Linotype";
}
.red:hover{
background-color:#800000;
}

.lightblue{
background-color: #7FB0F0;
color: #FFF;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
font-weight:100;
}
.lightblue:hover{
background-color:#7FA0C0;
}
.olive{
background-color: #B0E000;
border: 1px outset #D0E000;
color: #FFF;
font-style:italic;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}
.olive:hover{
background-color: #90A000;
}
.orange{
background-color: #FFCC00;
border: 1px outset #F2FF00;
color: #FFF;
font-family:Helvetica;
font-weight:bold;
}
.orange:hover{
background-color: #FF8000;
}
.pink{
background-color: #C0107F;
border: 1px outset #70107F;
color: #FFF;
font-family:"Georgia";
font-weight:bold;
}
.pink:hover{
background-color: #F0107F;
}
.pink:active{
border: 1px inset #70107F;
}
.sea{
background-color: #20807F;
color: #FFF;
}
.sea:hover{
background-color: #60807F;
}
.rose{
background-color: #F07FD0;
color: #FFF;
font-family: "Palatino Linotype";
font-style: italic;
letter-spacing:-1px;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
}
.rose:hover{
background-color: #B07FA0;
}
.black{
background-color: #000;
background-image:url(buttonover2.png);
color: #FFF;
letter-spacing:-1px;
text-shadow: 0 2px 1px rgba(0,0,0,0.2);
}
.black:hover{
background-color: #777;
}

.sand{
background-color: #FFF090;
background-image:url(buttonover2.png);
color: #fff;
letter-spacing: 3px;
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.sand:hover{
background-color: #F0C07F;
}

.violet{
background-color: #9400D3;
background-image:url(buttonover2.png);
color: #777;
font-family:"Arial Black";
text-shadow: 0px 1px 1px #fff;
}
.violet:hover{
background-color: #8A2BE2;
}

.green{
background-color: #32CD32;
background-image:url(buttonover2.png);
color: #fff;
font-family:"Century Gothic";
text-transform:uppercase;
font-style:italic;
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.green:hover{
background-color: #2F4F4F;
}
.darkblue{
background-color: #00008B;
background-image:url(buttonover2.png);
color: #fff;
font-family:"Impact";
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.darkblue:hover{
background-color: #191970;
}
.sunset{
background-color: #FF6347;
background-image:url(buttonover2.png);
color: #777;
font-family:"Palatino Linotype";
text-transform:uppercase;
text-shadow: 0px 1px 1px #fff;
}
.sunset:hover{
background-color: #FF7F50;
}
.choco{
background-color: #D2691E;
background-image:url(buttonover2.png);
color: #fff;
font-family:"Gill Sans";
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.choco:hover{
background-color: #D2B48C;
}
.cadet{
background-color: #5F9EA0;
background-image:url(buttonover2.png);
color: #fff;
font-family: "Arial Narrow";
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}
.cadet:hover{
background-color: #008080;
}
.aqua{
background-color: #00FFFF;
background-image:url(buttonover2.png);
color: #fff;
font-family: "Tahoma";
text-shadow: 1px 1px 4px #000;
}
.aqua:hover{
background-color: #00FFCC;
}

3. Menerapkan css pada kode HTML.

<body style="background-color:#888;">
 <a href="#" class="tombol shadow">Cool Shadow</a>
 <a href="#" class="tombol engraved">Dark Engraved</a>
 <a href="#" class="tombol glow">Mystic Glow</a>
 <a href="#" class="tombol white">Frozen White</a>
 <a href="#" class="tombol red">Sexy Red</a>
 <a href="#" class="tombol lightblue">Heavenly Blue</a>
 <a href="#" class="tombol olive">Olive Outset</a>
 <a href="#" class="tombol orange">Juicy Orange</a>
 <a href="#" class="tombol pink">Lovely Pink</a>
 <a href="#" class="tombol sea">Deep Sea</a>
 <a href="#" class="tombol rose">Rose Vanity</a>
 <a href="#" class="tombol black">Buttonize Gray</a>
 <a href="#" class="tombol sand">Dreamy Sand</a>
 <a href="#" class="tombol violet">Violent Violet</a>
 <a href="#" class="tombol green">Grasshopper</a>
 <a href="#" class="tombol darkblue">Ocean Blue</a>
 <a href="#" class="tombol sunset">Golden Sunset</a>
 <a href="#" class="tombol choco">Sweet Chocolate</a>
 <a href="#" class="tombol cadet">Cadet Dreams</a>
 <a href="#" class="tombol aqua">Aqua Love</a>
 </body>

CATATAN :

1. Upload 2 gambar ini ditempat penyimpanan gambar anda.

2. Carilah tulisan buttonover dan buttonover2 dari kode dilangkah 1 dan 2, sesuaikan dengan URL tempat penyimpanan gambar anda.

Artikel disarikan dari : tympanus.net