Dari sini tentunya Anda sudah tahu kalau CSS adalah solusi dari desain tampilan website. Dengan adanya CSS Anda bias membuat tampilan website Anda menjadi indah bahkan sangat menarik. Ya tentu saja kalau Anda bisa menggunakan CSS dengan baik. Nah, disini saya akan jelaskan bagaimana cara membuat tampilan suatu tombol (button) dengan gradien warna tertentu. Jadi jika Anda masih ingin mengetahui caranya, tetap baca arikel ini sampai habis okee….???
Dulu sebelum ada CSS3, website-website di internet akan menggunakan gambar sebagai background untuk tombol jika ingin membuat tombol tersebut memiliki tampilan gradien warna. Ya, saya pun dulu juga begitu, sebelum saya mengenal CSS3, saya akan menggunakan suatu gambar gradient sebagai background tombol. Tapi sekarang sudah beda, Anda sudah bisa membuat tampilan gradient warna dengan menggunakan CSS. Nah, CSS yang mampu membuat gradient atau tampilan hingga seakan-akan mampu membuat tampilan 3D adalah CSS3.
Oke, sudah sedikit paham dengan CSS3? Sekarang kita akan bermain-main dengan yang namanya CSS3 :)
Coba lihat gambar dibawah ini… Bisakah Anda membuatnya?
Tombol Gradien (Gradient Button) Preview
Mungkin saat ini Anda masih belum bisa membuatnya, tapi nanti saya yakin Anda mampu membuat sendiri bahkan bisa lebih bagus lagi daripada buatan saya. :)
Langsung saja kita mulai, pertama siapkan dokumen HTML. Caranya Anda bisa membuatnya dengan menggunakan Dreamweaver atau Anda buka NotePad dan copas (copy-paste) code dibawah ke dalam NotePad kemudian simpan (Save As) dengan nama gradien.html atau gradien.htm dan pastikan pada box Save In terpilih All Files.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style type="text/css">
.tombol {
padding: 7px 12px;
cursor: pointer;
font: bold 20px Tahoma;
color: #fff;
text-shadow: 0 -1px 0 #600;
border: solid 1px #600;
background: #e00;
background: -moz-linear-gradient(top, #e00, #700);
background: -webkit-linear-gradient(top, #e00, #700);
background: -ms-linear-gradient(top, #e00, #700);
background: -o-linear-gradient(top, #e00, #700);
background: linear-gradient(top, #e00, #700);
}
.tombol:active {
background: #a00;
}
</style>
<p><input type="button" value="Tombol Gradient" /></p>
Nah, jika sudah coba buka file gradien.htm atau gradien.html tadi dengan menggunakan web browser Anda dan bagaimana hasilnya….
Sudah tahukah Anda maksud dari kode CSS tersebut?
Tombol Gradien (Gradient button) Code
Background yang pertama diartikan sebagai warna dasar jika gradient gagal ditampilkan. Background yang berikutnya ditampilkan untuk web browser yang ingin diinginkan untuk bisa meampilkannya sesuai dengan spesifikasinya seperti Mozilla Firefox, Safari, Opera, dan Internet Explorer. Disini saya mendeklarasikan CSS3 untuk beberapa web browser karena setiap orang menggunakan web browser yang berbeda-beda, kecuali jika web browser yang ada didunia ini hanya satu saja. :)
Nah, Anda sebagai web developer sebaiknya juga perlu memperhatikan website Anda dari segi pengunjung website, bukan pemilik website.
Oke, mungkin dengan keterangan di atas Anda sudah bisa membuat tombol website Anda memiliki gradien warna. Nah, jika masih menemui kesulitan, tanyakan saja.
Tetap ikuti terus perkembangan blog ini untuk mendapatkan informasi-informasi tentang website dan internet. :)