KAWAH PAPANDAYAN

Cara Membuat Tombol Dengan Css

Cara Membuat Tombol Dengan Css Pada Postingan - sebelum masuk kepada pembahasan saya beritahukan script yang saya dapatkan ini merupakan script dari blognya Mas Dalang. Membuat Tombol Dengan Css yang akan saya sampaikan merupakan sebuah inovasi untuk merubah sebuah tombol yang akan sahabat pasang pada sebuah postingan. sahabat bisa pergunakan tombol ini untuk digunakan sebagai tombol Download, Demo, atau apa saya terserah keinginan sahabat.

Dulu saya sering menggunakan gambar untuk membuat sebuah tombol download atau demo, tetapi sekarang dengan adanya kode css untuk mempercantik sebuah tombol maka saya tidak perlu repot repot lagi meng upload gambar.

Oke kalau sahabat penasaran dibawah ini adalah contoh Tombol Dengan Menggunakan Css :










Nah sekarang apabila sahabat tertarik untuk Membuat Tombol Dengan Css Pada Postingan, silahkan lakukan langkah langkah berikut ini :

1. Login ke Blogger >> Rancangan >> Edit HTML

2. Cari kode ]]></b:skin>

3. Letakan kode dibawah ini tepat diatas kode ]]></b:skin>



.tombol a{ 
background-color: #222; 
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0)); 
background-image: -moz-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0)); 
background-image: -ms-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0)); 
background-image: -o-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0)); 
background-image: linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0)); 
border: 1px solid #111; 
color: #c6c6c6; 
float: left; 
font: bold 14px/30px sans-serif; 
height: 30px; 
margin: 10px 20px; 
padding: 0 15px; 
position: relative; 
text-decoration: none; 
text-shadow: 0 -1px 1px hsla(0,0%,0%,.8); 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px; 
-webkit-box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); 
-moz-box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); 
box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); 

.tombol a:hover, .tombol a:focus { 
background-color: #242424; 
color: #f6f6f6; 
-webkit-box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); 
-moz-box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); 
box-shadow: 0 1px 4px hsla(0,0%,0%,.4), inset 0 1px 0 hsla(0,0%,100%,.2); 

.tombol a:hover:after, .tombol a:focus:after { 
background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0)); 
background-image: -moz-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0)); 
background-image: -ms-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0)); 
background-image: -o-linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0)); 
background-image: linear-gradient(left, hsla(0,0%,0%,0), hsla(0,0%,100%,.8), hsla(0,0%,0%,0)); 
background-position: 50% 0%; 
background-size: 200% 200%; 
content: ''; 
display: none; 
height: 1px; 
left: 0; 
position: absolute; 
right: 0; 
top: 0; 

.tombol a:hover:after, .tombol a:focus:after { 
display: block; 

.tombol a:before { 
background: #363636; bottom: -8px; content: ''; 
left: -8px; 
position: absolute; 
right: -8px; 
top: -8px; 
z-index: -1; 
-webkit-border-radius: 6px; -moz-border-radius: 6px; 
border-radius: 6px; 
-webkit-box-shadow: 0 1px 1px hsla(0,0%,100%,.3), inset 0 1px 1px hsla(0,0%,0%,.4), inset 0 0 5px hsla(0,0%,0%,.2); 
-moz-box-shadow: 0 1px 1px hsla(0,0%,100%,.3), inset 0 1px 1px hsla(0,0%,0%,.4), inset 0 0 5px hsla(0,0%,0%,.2); 
box-shadow: 0 1px 1px hsla(0,0%,100%,.3), inset 0 1px 1px hsla(0,0%,0%,.4), inset 0 0 5px hsla(0,0%,0%,.2); 

.tombol a:active { 
background-color: #202020; color: #b6b6b6; 
line-height: 32px; 
-webkit-box-shadow: 0 1px 0 hsla(0,0%,100%,.1), inset 0 1px 4px hsla(0,0%,0%,.8); 
-moz-box-shadow: 0 1px 0 hsla(0,0%,100%,.1), inset 0 1px 4px hsla(0,0%,0%,.8); 
box-shadow: 0 1px 0 hsla(0,0%,100%,.1), inset 0 1px 4px hsla(0,0%,0%,.8); 

.tombol a:active:after { 
display: block; 
left: 1px; 
opacity: .5; 
right: 1px; 
top: 31px; 
}

4. Simpan Template

5. Untuk menampilkan tombol pada halaman posting sahabat harus memasukan kode dibawah ini setiap sahabat ingin membuat tombol.



<div class="tombol">
<a href="#" target="_blank">Download</a></div>

6. Ganti tulisan Download sesuai keinginan sahabat

Nah itu Cara Membuat Tombol Dengan Css Pada Postingan yang dapat saya sampaikan, apabila terdapat kode css yang salah silahkan untuk melaporkan dengan menulis pesan lewat kotak komentar, sekian dan terimakasih.







Ditulis Oleh : Yudus | Media Sharing Sundaboy

Sahabat sedang membaca tulisan Cara Membuat Tombol Dengan Css. Yang ditulis oleh sundaboy Grt. Apabila sahabat ingin menyebar luaskan artikel ini untuk kepentingan umum, dimohon untuk menyertakan Link sumber dibawah ini. Untuk Kritik dan sarannya sahabat bisa mengirimkan pada kotak komentar dibawah, atau melalui email sundaboy88@gmail.com. tengkyu

4 komentar:

=================================
- Berkomentarlah Yang Sopan
- Tidak Diperkenankan Memasukan Link Aktif Pada Isi Komentar
- Berkomentarlah Sesuai Dengan Content
=================================