Button Slide Text on hover, ini ialah button dengan text akan bergeser saat cursor berada pada posisi button/tombol tersebut, button tersebut juga cocok untuk blog, karna efek dari slide tersebut, jadi eksklusif saja ke pointnya, bagaimana cara menciptakan button dengan efek slide text on hover di blog.
1. Login ke blog kalian, kemudian Template > edit HTML
2. Tambahkan CSS dibawah ini sebelum isyarat </style>
*, *:before, *:after{ box-sizing: border-box; padding: 0; margin: 0; color: #111; text-decoration: none; font-weight: 300; font-size: 1em/1.5; font-family: 'Roboto', Arial, sans-serif; } html, body{background: rgb(236, 240, 241);} div.abdurbtn{min-width: 500px;margin: 6% auto;text-align:enter;} .abdurbtn h1{font-size: 3.2em;padding: 35px 0 45px;} .abdurbtn button {position:relative;display:block;overflow:hidden;left:50%;margin-bottom:20px;width:264px;padding:17px 55px;background:transparent;outline:none;border:2px solid #111;transform:translateX(-50%);} .abdurbtn button:hover{cursor:pointer} .abdurbtn button:hover:before{opacity:1;transform:translate(0,0);} .abdurbtn button:before{content:attr(data-hover);position:absolute;top:1.22em;left:0;width:100%;text-transform:uppercase;letter-spacing:3px;font-weight:800;font-size:1em;opacity:0;transform: translate(-100%,0);-moz-transition: all 0.32s ease-in-out;-webkit-transition: all 0.32s ease-in-out;transition: all 0.32s ease-in-out;} .abdurbtn button:hover div{opacity: 0; transform: translate(100%,0);} .abdurbtn button div{text-transform:uppercase;letter-spacing:3px;font-weight:00;font-size:1em;-moz-transition: all 0.32s ease-in-out;-webkit-transition: all 0.32s ease-in-out;transition: all 0.32s ease-in-out;} .abdurbg-btn button {position:relative;display:block;overflow:hidden;left:50%;margin-bottom:20px;width:264px;padding:17px;background:#009ccf;border:none;transform:translateX(-50%);} .abdurbg-btn button:hover{cursor: pointer} .abdurbg-btn button:hover:before{opacity: 1; transform: translate(0,0);} .abdurbg-btn button:before{content: attr(data-hover);position: absolute;top: 1.22em; left: 0;width: 100%;text-transform: uppercase;letter-spacing: 3px;font-weight: 800;font-size: 1em;opacity: 0;transform: translate(-100%,0);-moz-transition: all 0.32s ease-in-out;-webkit-transition: all 0.32s ease-in-out;transition: all 0.32s ease-in-out;} .abdurbg-btn button:hover div{opacity: 0;transform: translate(100%,0);} .abdurbg-btn button div{text-transform: uppercase;letter-spacing: 3px;font-weight: 800;font-size: 1em;-moz-transition: all 0.32s ease-in-out;-webkit-transition: all 0.32s ease-in-out;transition: all 0.32s ease-in-out;} 3. Lalu untuk script buttonnya, lihat dibawah
<div class="abdurbtn"> <button data-hover="www.abdurrahim"><div>Abdurrahim</div></button> </div> *Untuk yang diberi tanda berwarna biru, silahkan kalian teks yang kalian inginkan
4. Script yang di no 3 itu hanya untuk menampilkan button saja, tapi ada link tujuan,
supaya button tersebut ada link tujuannya silahkan tambahkan script dibawah ini,
onclick='window.open("http://www.abdurrahim.id");return false;' 5. Sehingga menjadi menyerupai dibawah ini.
<div class="abdurbtn"> <button data-hover="www.abdurrahim.id" onclick='window.open("http://www.abdurrahim.id");return false;'><div>Abdurrahim</div></button> </div> *Untuk yang diberi tanda berwarna kuning, silakan kalian ganti dengan Url yang ingin dituju
6. Untuk Button yang mempunyai Background, tinggal ganti saja isyarat dibawah ini
<div class="abdurbtn"> ..... </div> 7. menjadi menyerupai ini.
<div class="abdurbg-btn"> ..... </div> Untuk Demonya silahkan Klik tombol dibawah
