27 Tombol Dengan Efek Transisi 2D dan Cara Memasangnya

Dul Kenyot   13.21   Button, Css, Tutorial   2 comments  

Cara Membuat Tombol Dengan Efek Transisi 2D, terkadang dari sebuah tombol pada halaman postingan kita bisa membuat pengunjung terkesan dan ingin juga memasangnya di blog mereka, sebab tombol tersebut memiliki daya tarik tertentu baik dari segi tampilan maupun warnanya kali ini saya kan membagikan sebuah tutorial cara membuat tombol di halaman posting blog dengan efek transisi 2 dimensi murni menggunakan css.
Tombol dengan efek transisi 2d ini secara default bagi yang menggunakan flatform blogger tidak tersedia, nah jika sobat ingin membuat tampilan tombol pada blog sobat menjadi "lebih indah atraktif", ini dia solusinya sob...

27 Tombol Dengan Efek Transisi 2D

Simak langkah-langkahnya dibawah ini:

Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !

Cara Memasang 27 Tombol Dengan Efek Transisi 2D

Langkah Ke-1: Masuk ke menu Template>>Edit HTMLTambahkan Kode Css berikut sebelum kode </head> , jika sudah ada abaikan saja sob...

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

Langkah Ke-2: Tambahkan  kode css  dibawah ini sebelum kode </head> silahkan diedit untuk warna dan ukurannya pada kode .btn lalu Simpan Template sobat. Pilihan Warna

<link href="//cdn.rawgit.com/antoncabon/css/master/2d-transisi.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.kotak {margin:20px auto;text-align:center;}
.btn{display:inline-block;position:relative;font-family:'Open Sans',Helvetica,sans-serif;text-decoration:none;font-weight:700;background:#333;padding:9px 28px;margin:5px 5px;border-radius:3px;opacity:1;border:0;text-transform:uppercase;transition:all .3s ease-out;}
</style> 

Langkah Ke-3:  Tambahkan kode html dibawah ini  pada halaman postingan sobat posisi HTML mode bukan Compose. Pilih salah satu saja sob, ga perlu dipasang semua.

 <div class="kotak">
<h2>Efek Transisi 2D</h2>
<a href="#" class="btn hvr-grow">Grow</a>
<a href="#" class="btn hvr-shrink">Shrink</a>
<a href="#" class="btn hvr-pulse">Pulse</a>
<a href="#" class="btn hvr-pulse-grow">Pulse Grow</a>
<a href="#" class="btn hvr-pulse-shrink">Pulse Shrink</a>
<a href="#" class="btn hvr-push">Push</a>
<a href="#" class="btn hvr-pop">Pop</a>
<a href="#" class="btn hvr-bounce-in">Bounce In</a>
<a href="#" class="btn hvr-bounce-out">Bounce Out</a>
<a href="#" class="btn hvr-rotate">Rotate</a>
<a href="#" class="btn hvr-grow-rotate">Grow Rotate</a>
<a href="#" class="btn hvr-float">Float</a>
<a href="#" class="btn hvr-sink">Sink</a>
<a href="#" class="btn hvr-bob">Bob</a>
<a href="#" class="btn hvr-hang">Hang</a>
<a href="#" class="btn hvr-skew">Skew</a>
<a href="#" class="btn hvr-skew-forward">Skew Forward</a>
<a href="#" class="btn hvr-skew-backward">Skew Backward</a>
<a href="#" class="btn hvr-wobble-horizontal">Wobble Horizontal</a>
<a href="#" class="btn hvr-wobble-vertical">Wobble Vertical</a>
<a href="#" class="btn hvr-wobble-to-bottom-right">Wobble To Bottom Right</a>
<a href="#" class="btn hvr-wobble-to-top-right">Wobble To Top Right</a>
<a href="#" class="btn hvr-wobble-top">Wobble Top</a>
<a href="#" class="btn hvr-wobble-bottom">Wobble Bottom</a>
<a href="#" class="btn hvr-wobble-skew">Wobble Skew</a>
<a href="#" class="btn hvr-buzz">Buzz</a>
<a href="#" class="btn hvr-buzz-out">Buzz Out</a>
</div>   

Langkah Ke-3: Silahkan diganti nama dari tombol tersebut.

Demo Efek Transisi 2D

GrowShrinkPulsePulse GrowPulse Shrink PushPopBounce In Bounce OutRotateGrow RotateFloatSinkBob HangSkewSkew Forward Skew BackwardWobble Horizontal Wobble VerticalWobble To Bottom Right Wobble To Top RightWobble TopWobble BottomWobble SkewBuzz Buzz Out

Untuk pilihan warna silahkan sobat cek disini 
SELESAI ! Jika ada kendala silahkan tanyakan pada kolom komentar dan selamat mencoba.