CSS Button Cantik

Ternyata bukan hanya cewek saja yah penyandang gelar “Cantik”, Button juga bisa bro ! 😀
Button (Tombol navigasi, menu, login, register, dan yang lainya), merupakan efek penting dalam ke indahan suatu website, makanya banyak sekali para Web design memilih menggunakan Button yang Cantik.

Selain harus cantik dan selaras dengan desain website, button juga berpengaruh sangat penting, guna mempermudah pengunjung website dalam berselancar didalam website kita, apa jadinya jikalau button navigasi website kita kurang sesuai bahkan terkesan asal asalan, pastinya pengunjung website kita pun akan merasa bosan berlama lama di website kita bukan ?

Dibawah ini adalah beberapa Button yang hanya menggunakan CSS, sudah saya kemas menjadi satu halaman, Anda tinggal pilih button mana yang anda suka… 🙂

Mengapa hanya menggunakan CSS, tanpa JS atau jQuery ? alasanya ?
Karena dengan CSS tampilan pada website akan lebih ringan dan selain itu scriptnya tidaklah begitu rumit, dan alasan lainya adalah sesuai kegunaan.

Script CSS Button Cantik

<!DOCTYPE html">
<html>
<head>
<title>CSS Button</title>

<style>
.button{
    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;
}
.button:hover{
    background-color: #777;
    }
.button:active{
    top: 1px;
    left:1px;
}
.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;
}
</style>

</head>
    <body style="background-color:#888;">

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


Totalnya ada 20 (Dua puluh) Button Cantik yang berbeda dari script diatas.
Silahkan gunakan Realtime HTML Editor ↗ (script akan otomatis terbuka di halaman tersebut), untuk edit dan melihat hasilnya.

Hanya ini saja dulu saat ini, sampai jumpa lagi di artikel artikel berikutnya, salam sukses selalu teruntuk anda semua.

Mungkin Anda Menyukai