Membuat Tombol Cantik Dengan CSS | Tombol dalam website atau blog bisa digunakan untuk berbagai macam keperluan, diantaranya adalah untuk download, menampilkan detail artikel, atau untuk pembelian produk dalam website toko online, ataupun untuk submit pendaftaran secara online.
Dalam mendesain tombol para developer / pengembang menggunakan versi yang sangat bervariasi, sesuai dengan jiwa seni mereka, tiap pengembang memiliki versi dan gaya yang berbeda pula.
Dalam tutorial kali ini, kita akan coba Membuat Tombol Cantik Dengan CSS seperti pada gambar di atas.
Baiklah, kita akan mulai dari membuat file html, silahkan pelajari tutorial singkat Belajar HTML Dasar yang bisa dilihat Disini Jika anda belum mengerti, tapi jika sudah mengerti langsung saja buat dengan mengetikkan script di bawah ini :
<html>
<title>Tombol Cantik</title>
<head>
<link href='style.css' rel='stylesheet' type='text/css'/>
</head>
<body>
<center> <a >Desain Tombol Cantik <p> Oleh : </a><a href='http://indo-webst.blogspot.com'>PHP Indonesia</a></p> <br></center>
<a class='hijau' href='http://indo-webst.blogspot.com'>Tombol</a>
<a class='merah' href='http://indo-webst.blogspot.com'>Tombol</a>
<a class='biru' href='http://indo-webst.blogspot.com'>Tombol</a>
<a class='hitam' href='http://indo-webst.blogspot.com'>Tombol</a>
<a class='kuning' href='http://indo-webst.blogspot.com'>Tombol</a>
<br>
<br>
<p>
<center><a>Copyright @ 2015 by : </a><a href="https://www.facebook.com.pendeta.mokong" target="_blank">Maz Rully-W</a><a> All rights reserved.</a></center>
</p>
</body>
</html>
Simpan dengan nama index.html, File ini hanya akan menampilkan tulisan jika di buka dibrowser, agar tampilannya lebih menarik, kita akan tambahkan CSS.
Untuk membuat file bisa ambil script di bawah ini
body{
margin:170px;
}
a {
font:bold 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-decoration:none;
}
.hijau {
background: -moz-linear-gradient(top, #1BFD30, #02650B);
background: -ms-linear-gradient(top, #1BFD30, #02650B);
background: -o-linear-gradient(top, #1BFD30, #02650B);
background: -webkit-linear-gradient(top, #1BFD30, #02650B);
background: linear-gradient(top, #1BFD30, #02650B);
padding-top:15px;
padding-bottom:15px;
padding-left:35px;
padding-right:35px;
text-decoration:none;
font:bold 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
border-radius:5px;
color:#000000;
}
.hijau:hover {
background: -moz-linear-gradient(top, #ACFDDB, #025734);
background: -ms-linear-gradient(top, #ACFDDB, #025734);
background: -o-linear-gradient(top, #ACFDDB, #025734);
background: -webkit-linear-gradient(top, #ACFDDB, #025734);
background: linear-gradient(top, #ACFDDB, #025734);
color:#000000;
}
.merah {
background: -moz-linear-gradient(top, #FD0000, #5C010C);
background: -ms-linear-gradient(top, #FD0000, #5C010C);
background: -o-linear-gradient(top, #FD0000, #5C010C);
background: -webkit-linear-gradient(top, #FD0000, #5C010C);
background: linear-gradient(top, #FD0000, #5C010C);
padding-top:15px;
padding-bottom:15px;
padding-left:35px;
padding-right:35px;
text-decoration:none;
font:bold 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
border-radius:5px;
color:#fff;
}
.merah:hover {
background: -moz-linear-gradient(top, #FD5D5D, #910112);
background: -ms-linear-gradient(top, #FD5D5D, #910112);
background: -o-linear-gradient(top, #FD5D5D, #910112);
background: -webkit-linear-gradient(top, #FD5D5D, #910112);
background: linear-gradient(top, #FD5D5D, #910112);
color:#000000;
}
.biru {
background: -moz-linear-gradient(top, #2534FE, #01085F);
background: -ms-linear-gradient(top, #2534FE, #01085F);
background: -o-linear-gradient(top, #2534FE, #01085F);
background: -webkit-linear-gradient(top, #2534FE, #01085F);
background: linear-gradient(top, #2534FE, #01085F);
padding-top:15px;
padding-bottom:15px;
padding-left:35px;
padding-right:35px;
text-decoration:none;
font:bold 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
border-radius:5px;
color:#fff;
}
.biru:hover {
background: -moz-linear-gradient(top, #D169FC, #4F036F);
background: -ms-linear-gradient(top, #D169FC, #4F036F);
background: -o-linear-gradient(top, #D169FC, #4F036F);
background: -webkit-linear-gradient(top, #D169FC, #4F036F);
background: linear-gradient(top, #D169FC, #4F036F);
color:#fff;
}
.hitam {
background: -moz-linear-gradient(top, #ACACAF, #000000);
background: -ms-linear-gradient(top, #ACACAF, #000000);
background: -o-linear-gradient(top, #ACACAF, #000000);
background: -webkit-linear-gradient(top, #ACACAF, #000000);
background: linear-gradient(top, #ACACAF, #000000);
padding-top:15px;
padding-bottom:15px;
padding-left:35px;
padding-right:35px;
text-decoration:none;
font:bold 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
border-radius:5px;
color:#fff;
}
.hitam:hover {
background: -moz-linear-gradient(top, #E4E4E5, #7D7D7E);
background: -ms-linear-gradient(top, #E4E4E5, #7D7D7E);
background: -o-linear-gradient(top, #E4E4E5, #7D7D7E);
background: -webkit-linear-gradient(top, #E4E4E5, #7D7D7E);
background: linear-gradient(top, #E4E4E5, #7D7D7E);
color:#000000;
}
.kuning {
background: -moz-linear-gradient(top, #FFFC0F, #E4E104);
background: -ms-linear-gradient(top, #FFFC0F, #E4E104);
background: -o-linear-gradient(top, #FFFC0F, #E4E104);
background: -webkit-linear-gradient(top, #FFFC0F, #E4E104);
background: linear-gradient(top, #FFFC0F, #E4E104);
padding-top:15px;
padding-bottom:15px;
padding-left:35px;
padding-right:35px;
text-decoration:none;
font:bold 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
border-radius:5px;
color:#000000;
}
.kuning:hover {
background: -moz-linear-gradient(top, #FEC37D, #FE8B04);
background: -ms-linear-gradient(top, #FEC37D, #FE8B04);
background: -o-linear-gradient(top, #FEC37D, #FE8B04);
background: -webkit-linear-gradient(top, #FEC37D, #FE8B04);
background: linear-gradient(top, #FEC37D, #FE8B04);
color:#000000;
}
Simpan dengan nama style.css, jangan lupa file css ini harus diletakkan satu folder dengan file index.html tadi.
Kalau sudah kurang lebih tampilannya akan seperti gambar di atas, untuk demo nya bisa langsung dicoba Disini
Dan untuk Source Code lengkapnya bisa langsung di download Disini
0 Response to "Membuat Tombol Cantik Dengan CSS"
Post a Comment