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

Membuat Tombol dengan Menggunakan CSS3
Written by: Oki Helfiska
Rating: 5
I'm Teacher Vocational School in SMK Labor Pekanbaru. I interested in Computer, Networking, Web Design, Blogging and the development of computer education.

Share This Post

Related Articles

5 Responses to “Membuat Tombol dengan Menggunakan CSS3”

  1. Zaiful Anwar says:

    wah kebetulan sekali bang, saya lagi semangat bikin theme wp dan CSS-nya pun masih valid CSS 2.1. mantap dah infonya.

  2. wahh.. keren ya. tapi sayang juga.. web browser yang mendukung tampilan css3 cuma firefox, safari, sama chrome.. tapi gpp deh.. khan forefox banyak yang pake,,.,

  3. harival says:

    pak punya tips dan trik gak untuk bisa memahami CSS lebih cepat ??

  4. bajangstyle says:

    cba d jelaskan cra pemakainnya bos,g ngrti q.tq sblmnya

  5. Oki Helfiska says:

    @bajangstyle : untuk prakteknya dijelaskan pada point 3, kita tinggal mengetikkan seperti contoh di point 3

Leave a Reply

Powered by WordPress · Powered by SEO