Buat Tombol dengan CSS3

Salam Blogging

Kali ini saya akan membagikan tutorial blog css3 pada kalian ,nah sekarang saya akan mempraktekkan cara membuat tombol dengan css3.

Langsung ajah ke pokok pembicaraan
berikut contohnya


Update Status

Via MTP Corp

Pertama , buka blogger sobat
Kedua, pilih Template lalu klik edit html (untuk template yang baru) jangan lupa centang

Ketiga, cari kode ]]></b:skin> ,biar cepet gunakan 
Keempat, masukan kode berikut di atas kode ]]></b:skin>
@charset "utf-8"; /* CSS Document */ ::selection { background-color: #55595c; color: #fff; text-shadow: 0 1px 0 #000; } ::-moz-selection { background-color: #55595c; color: #fff; text-shadow: 0 1px 0 #000; } @font-face { font-family: 'BebasNeueRegular'; src: url('BebasNeue-webfont.eot'); src: local('?'), url('BebasNeue-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } * { padding: 0; margin: 0; } html { height: auto; min-height: 100%; } body { margin: 0px; padding: 0px; height: auto; min-height: 100%; text-align: center; background: #242428; background: -webkit-gradient(linear, 0 bottom, 0 top, from(#1f1f23 ), to(#29292d)); background: -moz-linear-gradient(-90deg, #29292d, #1f1f23 ); text-shadow: 0 -1px 0 #000; } #wrap { width:500px; margin:13% auto 0; } h1 { color:#7c7c84; font: bold 13px/19px Arial, Helvetica, san serif; margin-bottom:30px; } #btn-wrap { position:relative; padding:5px; margin:0 auto; width:230px; height:50px; display:block; text-decoration:none; margin-bottom:30px; background: #242428; background: -webkit-gradient(linear, 0 bottom, 0 top, from(#2d2d30 ), to(#17171a)); background: -moz-linear-gradient(-90deg, #17171a, #2d2d30 ); -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-box-shadow: 0 1px 0 #37373b; -moz-box-shadow: 0 1px 0 #37373b; box-shadow: 0 1px 0 #37373b; } span.title{ color:#d6d6e7; font:30px/58px "BebasNeueRegular", Helvetica, Arial, sans-serif; height:50px; width:230px; display:block; position:relative; -webkit-box-shadow: 0 -1px 0 #8d8d94, 0 1px 1px #0b0b0c; -moz-box-shadow: 0 -1px 0 #8d8d94, 0 1px 1px #0b0b0c; box-shadow: 0 -1px 0 #8d8d94, 0 1px 1px #0b0b0c; background: #52525c; background: -webkit-gradient(linear, 0 bottom, 0 top, from(#383840 ), to(#5a5a64)); background: -moz-linear-gradient(-90deg, #5a5a64, #383840 ); -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; z-index:5; -webkit-transition:width .2s ease-out; -moz-transition:width .2s ease-out; -o-transition:width .2s ease-out; } #btn-wrap:hover span.title { font-size:19px; width:135px; } #info { position:absolute; height:50px; width:230px; top:5px; right:4px; -webkit-box-shadow: 0 -1px 0 #404042, 0 1px 1px #0b0b0c; -moz-box-shadow: 0 -1px 0 #404042, 0 1px 1px #0b0b0c; box-shadow: 0 -1px 0 #404042, 0 1px 1px #0b0b0c; background: #2a2a2d; background: -webkit-gradient(linear, 0 bottom, 0 top, from(#212124 ), to(#2a2a2d)); background: -moz-linear-gradient(-90deg, #2a2a2d, #212124 ); -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; z-index:4; } #info p { width:65px; margin:12px 17px 0 0; position:absolute; right:0; color:#7c7c84; font:11px/12px Helvetica, Arial, sans-serif; text-align:left; }
Kelima, Simpan template
Untuk menaruhnya di postingan ,masukan kode berikut :


<a href="Link Target" target="
_blank" title="Judul Tombol!" id="btn-wrap">
<span class="title">Judul Tombol</span>
<div id="info"><p>
<strong>Text</strong><span>Text</span></p></div></a> 

* Note *
Untuk Link Target dapat kamu ganti dengan link kamu sendiri
Untuk Judul Tombol dapat kamu ganti sesuai keinginan kalian
Untuk Text dapat kamu ganti sesuai keinginan kalian

Teknik ini dapat di aplikasikan juga jika kalian ingin menggunakan Tombol Download