Cara Membuat Button dengan Efek Sliding Hover

Tutorial

• Masuk ke Edit HTML
• Carikode ]]></b:skin>
• Copy kode di bawah ini dan letakkan di atas kode ]]></b:skin> setelah itu save template.

.a-btn{background:#80a9da; background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1)); background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%); background:linear-gradient(top, #80a9da 0%, #6f97c5 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 ); padding-left:20px; padding-right:80px; height:38px; display:inline-block; position:relative; border:1px solid #5d81ab; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5); -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; float:left; clear:both; margin:10px 0px; overflow:hidden; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .a-btn-text{ padding-top:8px; display:block; font-size:18px; white-space:nowrap; text-shadow:0px 1px 1px rgba(255,255,255,0.3); color:#446388; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .a-btn-slide-text{ position:absolute; height:100%; top:0px; right:52px; width:0px; background:#63707e; text-shadow:0px -1px 1px #363f49; color:#fff; font-size:18px; white-space:nowrap; text-transform:uppercase; text-align:left; text-indent:10px; overflow:hidden; line-height:38px; -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset; -webkit-transition:width 0.3s linear; -moz-transition:width 0.3s linear; -o-transition:width 0.3s linear; transition:width 0.3s linear; } .a-btn-icon-right{ position:absolute; right:0px; top:0px; height:100%; width:52px; border-left:1px solid #5d81ab; -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; } .a-btn-icon-right span{ width:38px; height:38px; opacity:0.7; position:absolute; left:50%; top:50%; margin:-20px 0px 0px -20px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWXs1sWEGtfaT5TBgTbwliEqaJGD0nubUj83sQMXMha3jv9PKFriokSFwflNKqSEn9Jb4rs7Jj30jodvwOT0PM_7SZYk0RduC5Q9o26lWb39pbKw8yQYBUaQ6_qhGRMskOuD4CnJE6g2M/s1600/arrow_right.png) no-repeat 50% 55%; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .a-btn:hover{ padding-right:180px; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2); } .a-btn:hover .a-btn-text{ text-shadow:0px 1px 1px #5d81ab; color:#fff; } .a-btn:hover .a-btn-slide-text{ width:100px; } .a-btn:hover .a-btn-icon-right span{ opacity:1; } .a-btn:active{ position:relative; top:1px; background:#5d81ab; -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; border-color:#80a9da; }

Jika ingin meletakan button ini di sidebar silahkan masuk ke opsi layout lalu add gadget SELANJUTNYA pilih JavaScript/HTML Dan pastekan kode ini di sana. Jika sudah lalu save.

<div class="button-wrapper"><a href="Button URL" class="a-btn"> <span class="a-btn-text">Register now</span> <span class="a-btn-slide-text">It's free!</span> <span class="a-btn-icon-right"><span></span></span> </a> <a href="Button URL" class="a-btn"> <span class="a-btn-text">Become a member</span> <span class="a-btn-slide-text">Sign up!</span> <span class="a-btn-icon-right"><span></span></span> </a> <a href="Button URL" class="a-btn"> <span class="a-btn-text">Enter</span> <span class="a-btn-slide-text">Log in!</span> <span class="a-btn-icon-right"><span></span></span> </a> <a href="Button URL" class="a-btn"> <span class="a-btn-text">Get an account</span> <span class="a-btn-slide-text">For free!</span> <span class="a-btn-icon-right"><span></span></span> </a> </div>

Jika ingin meletakan button tersebut di Postingan silahkan salin kode di bawah ini lalu pasetekan pada area posting tanpa harus memparse kode ini.

<a href="Button URL" class="a-btn"> <span class="a-btn-text">Register now</span> <span class="a-btn-slide-text">It's free!</span> <span class="a-btn-icon-right"><span></span></span> </a> </div>

DEMO