7 Tombol Dengan Efek Shadow Dan Glow Transisi

Button Css Tutorial

7 Tombol Dengan Efek Shadow Dan Glow Transisi

Dul Kenyot   22.54   9 comments  

Cara Membuat 7 Tombol Dengan Efek Shadow Dan Glow Transisi. Terkadang dari sebuah tombol pada halaman postingan kita bisa membuat pengunjung menjadi terkesan dan ingin juga memasangnya di blog mereka, sebab tombol-tombol tersebut memiliki daya tarik tertentu baik dari segi tampilan maupun warnanya dan kali ini saya kan membagikan sebuah tutorial cara membuat tombol di halaman posting blog dengan efek Background Transisi. Lihat juga tutorial saya sebelumnya 17 Tombol Dengan Efek Border Transisi.
Tombol Dengan Efek Shadow Dan Glow Transisi  ini secara default bagi yang menggunakan flatform blogger tidak tersedia, nah jika sobat ingin membuat tampilan tombol pada blog sobat menjadi "lebih indah atraktif", saya ada solusinya sob...

7 Tombol Dengan Efek Shadow Dan Glow Transisi 

Simak langkah-langkahnya dibawah ini:

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

Cara Memasang 7 Tombol Dengan Efek Shadow Dan Glow Transisi 

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/Shadow-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">
<a href="#" class="btn hvr-shadow">Shadow</a>
<a href="#" class="btn hvr-grow-shadow">Grow Shadow</a>
<a href="#" class="btn hvr-float-shadow">Float Shadow</a>
<a href="#" class="btn hvr-glow">Glow</a>
<a href="#" class="btn hvr-shadow-radial">Shadow Radial</a>
<a href="#" class="btn hvr-box-shadow-outset">Box Shadow Outset</a>
<a href="#" class="btn hvr-box-shadow-inset">Box Shadow Inset</a>
</div>

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

Demo Efek Shadow dan Glow Transisi

ShadowGrow ShadowFloat ShadowGlowShadow RadialBox Shadow OutsetBox Shadow Inset

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

27 Icons Tombol Dengan Berbagai Efek

Button Css Tutorial

27 Icons Tombol Dengan Berbagai Efek

Dul Kenyot   22.53   2 comments  

Cara Membuat 27 Icons Tombol Dengan Berbagai Efek. Terkadang dari sebuah tombol pada halaman postingan kita bisa membuat pengunjung menjadi terkesan dan ingin juga memasangnya di blog mereka, sebab tombol-tombol tersebut memiliki daya tarik tertentu baik dari segi tampilan maupun warnanya dan kali ini saya kan membagikan sebuah tutorial cara membuat tombol di halaman posting blog dengan efek Background Transisi. Lihat juga tutorial saya sebelumnya 18 Icons Tombol Dengan Berbagai Efek.
27 Icons Tombol Dengan Berbagai Efek ini secara default bagi yang menggunakan flatform blogger tidak tersedia, nah jika sobat ingin membuat tampilan tombol pada blog sobat menjadi "lebih indah atraktif", saya ada solusinya sob...

27 Icons Tombol Dengan Berbagai Efek

Simak langkah-langkahnya dibawah ini:

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

Cara Memasang 27 Icons Tombol Dengan Berbagai Efek 

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/icons.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">
<a href="#" class="btn hvr-icon-back">Icon Back</a>
<a href="#" class="btn hvr-icon-forward">Icon Forward</a>
<a href="#" class="btn hvr-icon-down">Icon Down</a>
<a href="#" class="btn hvr-icon-up">Icon Up</a>
<a href="#" class="btn hvr-icon-spin">Icon Spin</a>
<a href="#" class="btn hvr-icon-drop">Icon Drop</a>
<a href="#" class="btn hvr-icon-fade">Icon Fade</a>
<a href="#" class="btn hvr-icon-float-away">Icon Float Away</a>
<a href="#" class="btn hvr-icon-sink-away">Icon Sink Away</a>
<a href="#" class="btn hvr-icon-grow">Icon Grow</a>
<a href="#" class="btn hvr-icon-shrink">Icon Shrink</a>
<a href="#" class="btn hvr-icon-pulse">Icon Pulse</a>
<a href="#" class="btn hvr-icon-pulse-grow">Icon Pulse Grow</a>
<a href="#" class="btn hvr-icon-pulse-shrink">Icon Pulse Shrink</a>
<a href="#" class="btn hvr-icon-push">Icon Push</a>
<a href="#" class="btn hvr-icon-pop">Icon Pop</a>
<a href="#" class="btn hvr-icon-bounce">Icon Bounce</a>
<a href="#" class="btn hvr-icon-rotate">Icon Rotate</a>
<a href="#" class="btn hvr-icon-grow-rotate">Icon Grow Rotate</a>
<a href="#" class="btn hvr-icon-float">Icon Float</a>
<a href="#" class="btn hvr-icon-sink">Icon Sink</a>
<a href="#" class="btn hvr-icon-bob">Icon Bob</a>
<a href="#" class="btn hvr-icon-hang">Icon Hang</a>
<a href="#" class="btn hvr-icon-wobble-horizontal">Icon Wobble Horizontal</a>
<a href="#" class="btn hvr-icon-wobble-vertical">Icon Wobble Vertical</a>
<a href="#" class="btn hvr-icon-buzz">Icon Buzz</a>
<a href="#" class="btn hvr-icon-buzz-out">Icon Buzz Out</a>
</div>

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

Demo Icons Efek

Icon BackIcon ForwardIcon DownIcon UpIcon SpinIcon DropIcon FadeIcon Float Away
Icon Sink AwayIcon GrowIcon ShrinkIcon PulseIcon Pulse Grow
Icon Pulse ShrinkIcon PushIcon PopIcon BounceIcon Rotate
Icon Grow RotateIcon Float
Icon SinkIcon BobIcon HangIcon Wobble HorizontalIcon Wobble VerticalIcon BuzzIcon Buzz Out

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

4 Tombol Dengan Efek Curls

Button Css Tutorial

4 Tombol Dengan Efek Curls

Dul Kenyot   22.52   2 comments  

Cara Membuat 4 Tombol Dengan Efek Curls. Terkadang dari sebuah tombol pada halaman postingan kita bisa membuat pengunjung menjadi terkesan dan ingin juga memasangnya di blog mereka, sebab tombol-tombol tersebut memiliki daya tarik tertentu baik dari segi tampilan maupun warnanya dan kali ini saya kan membagikan sebuah tutorial cara membuat tombol di halaman posting blog dengan efek Background Transisi. Lihat juga tutorial saya sebelumnya 8 Tombol Dengan Efek Speech Bubble.
Tombol Dengan Efek Curls  ini secara default bagi yang menggunakan flatform blogger tidak tersedia, nah jika sobat ingin membuat tampilan tombol pada blog sobat menjadi "lebih indah atraktif", saya ada solusinya sob...

4 Tombol Dengan Efek Curls

Simak langkah-langkahnya dibawah ini:

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

Cara Memasang 4 Tombol Dengan Efek Curls 

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/curls.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">
<a href="#" class="btn hvr-curl-top-left">Curl Top Left</a>
<a href="#" class="btn hvr-curl-top-right">Curl Top Right</a>
<a href="#" class="btn hvr-curl-bottom-right">Curl Bottom Right</a>
<a href="#" class="btn hvr-curl-bottom-left">Curl Bottom Left</a>
</div>

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

Demo Efek Curls

Curl Top LeftCurl Top RightCurl Bottom RightCurl Bottom Left

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

17 Tombol Dengan Efek Border Transisi

Button Css Tutorial

17 Tombol Dengan Efek Border Transisi

Dul Kenyot   22.51   Comment  

Cara Membuat 17 Tombol Dengan Efek Border Transisi. Terkadang dari sebuah tombol pada halaman postingan kita bisa membuat pengunjung menjadi terkesan dan ingin juga memasangnya di blog mereka, sebab tombol-tombol tersebut memiliki daya tarik tertentu baik dari segi tampilan maupun warnanya dan kali ini saya kan membagikan sebuah tutorial cara membuat tombol di halaman posting blog dengan efek Background Transisi. Lihat juga tutorial saya sebelumnya 27 Icons Tombol Dengan Berbagai Efek.
17 Tombol Dengan Efek Border Transisi  ini sama seperti tombol2 sebelumnya secara default bagi yang menggunakan flatform blogger tidak tersedia, nah jika sobat ingin membuat tampilan tombol pada blog sobat menjadi "lebih indah atraktif", saya ada solusinya sob...

17 Tombol Dengan Efek Border Transisi

Simak langkah-langkahnya dibawah ini:

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

Cara Memasang 17 Tombol Dengan Efek Border Transisi

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/border-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">
<a href="#" class="btn hvr-border-fade">Border Fade</a>
<a href="#" class="btn hvr-hollow">Hollow</a>
<a href="#" class="btn hvr-trim">Trim</a>
<a href="#" class="btn hvr-ripple-out">Ripple Out</a>
<a href="#" class="btn hvr-ripple-in">Ripple In</a>
<a href="#" class="btn hvr-outline-out">Outline Out</a>
<a href="#" class="btn hvr-outline-in">Outline In</a>
<a href="#" class="btn hvr-round-corners">Round Corners</a>
<a href="#" class="btn hvr-underline-from-left">Underline From Left</a>
<a href="#" class="btn hvr-underline-from-center">Underline From Center</a>
<a href="#" class="btn hvr-underline-from-right">Underline From Right</a>
<a href="#" class="btn hvr-reveal">Reveal</a>
<a href="#" class="btn hvr-underline-reveal">Underline Reveal</a>
<a href="#" class="btn hvr-overline-reveal">Overline Reveal</a>
<a href="#" class="btn hvr-overline-from-left">Overline From Left</a>
<a href="#" class="btn hvr-overline-from-center">Overline From Center</a>
<a href="#" class="btn hvr-overline-from-right">Overline From Right</a>
</div>

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

Demo Border Transisisi

Border FadeHollowTrim
Ripple OutRipple InOutline OutOutline InRound Corners
Underline From LeftUnderline From CenterUnderline From RightReveal
Underline RevealOverline RevealOverline From LeftOverline From CenterOverline From Right

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



http://kyleandkelsey.blogspot.com/2015/08/27-icons-tombol-dengan-berbagai-efek.html

8 Tombol Dengan Efek Speech Bubble

Button Css Tutorial

8 Tombol Dengan Efek Speech Bubble

Dul Kenyot   22.51   1 comment  

Cara Membuat 8 Tombol Dengan Efek Speech Bubble. Terkadang dari sebuah tombol pada halaman postingan kita bisa membuat pengunjung menjadi terkesan dan ingin juga memasangnya di blog mereka, sebab tombol-tombol tersebut memiliki daya tarik tertentu baik dari segi tampilan maupun warnanya dan kali ini saya kan membagikan sebuah tutorial cara membuat tombol di halaman posting blog dengan efek Background Transisi. Lihat juga tutorial saya sebelumnya 7 Tombol Dengan Efek Shadow dan Glow.
Tombol Dengan Efek Speech Bubble  ini secara default bagi yang menggunakan flatform blogger tidak tersedia, nah jika sobat ingin membuat tampilan tombol pada blog sobat menjadi "lebih indah atraktif", saya ada solusinya sob...

8 Tombol Dengan Efek Speech Bubble

Simak langkah-langkahnya dibawah ini:

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

Cara Memasang 8 Tombol Dengan Efek Speech Bubble 

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/speech-bubble.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">
<a href="#" class="btn hvr-bubble-top">Bubble Top</a>
<a href="#" class="btn hvr-bubble-right">Bubble Right</a>
<a href="#" class="btn hvr-bubble-bottom">Bubble Bottom</a>
<a href="#" class="btn hvr-bubble-left">Bubble Left</a>
<a href="#" class="btn hvr-bubble-float-top">Bubble Float Top</a>
<a href="#" class="btn hvr-bubble-float-right">Bubble Float Right</a>
<a href="#" class="btn hvr-bubble-float-bottom">Bubble Float Bottom</a>
<a href="#" class="btn hvr-bubble-float-left">Bubble Float Left</a>
</div>

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

Speech Bubbles

Bubble TopBubble RightBubble BottomBubble LeftBubble Float Top
Bubble Float RightBubble Float BottomBubble Float Left

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

18 Tombol Dengan Efek Background Transisi

Button Css Tutorial

18 Tombol Dengan Efek Background Transisi

Dul Kenyot   22.49   2 comments  

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

18 Tombol Dengan Efek Background Transisi 

Simak langkah-langkahnya dibawah ini:

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

Cara Memasang 18 Tombol Dengan Efek Background Transisi 

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/background-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">
<a href="#" class="btn hvr-fade">Fade</a>
<a href="#" class="btn hvr-back-pulse">Back Pulse</a>
<a href="#" class="btn hvr-sweep-to-right">Sweep To Right</a>
<a href="#" class="btn hvr-sweep-to-left">Sweep To Left</a>
<a href="#" class="btn hvr-sweep-to-bottom">Sweep To Bottom</a>
<a href="#" class="btn hvr-sweep-to-top">Sweep To Top</a>
<a href="#" class="btn hvr-bounce-to-right">Bounce To Right</a>
<a href="#" class="btn hvr-bounce-to-left">Bounce To Left</a>
<a href="#" class="btn hvr-bounce-to-bottom">Bounce To Bottom</a>
<a href="#" class="btn hvr-bounce-to-top">Bounce To Top</a>
<a href="#" class="btn hvr-radial-out">Radial Out</a>
<a href="#" class="btn hvr-radial-in">Radial In</a>
<a href="#" class="btn hvr-rectangle-in">Rectangle In</a>
<a href="#" class="btn hvr-rectangle-out">Rectangle Out</a>
<a href="#" class="btn hvr-shutter-in-horizontal">Shutter In Horizontal</a>
<a href="#" class="btn hvr-shutter-out-horizontal">Shutter Out Horizontal</a>
<a href="#" class="btn hvr-shutter-in-vertical">Shutter In Vertical</a>
<a href="#" class="btn hvr-shutter-out-vertical">Shutter Out Vertical</a>
</div>

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

Demo Efek Background Transisi

FadeBack PulseSweep To RightSweep To LeftSweep To BottomSweep To TopBounce To RightBounce To LeftBounce To BottomBounce To TopRadial OutRadial InRectangle InRectangle OutShutter In HorizontalShutter Out HorizontalShutter In VerticalShutter Out Vertical

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