Cara Membuat Button dengan Slide Text on Hover


Button Slide Text on hover, ini adalah button dengan text akan bergeser ketika cursor berada pada posisi button/tombol tersebut, button tersebut juga cocok untuk blog, karna efek dari slide tersebut, jadi langsung saja ke pointnya, bagaimana cara membuat button dengan efek slide text on hover di blog.

1. Login ke blog kalian, lalu Template > edit HTML

2. Tambahkan CSS dibawah ini sebelum kode </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,
agar button tersebut ada link tujuannya silahkan tambahkan script dibawah ini,

onclick='window.open("http://www.abdurrahim.id");return false;'

5. Sehingga menjadi seperti 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 memiliki Background, tinggal ganti saja kode dibawah ini

<div class="abdurbtn">
.....
</div>

7. menjadi seperti ini.

<div class="abdurbg-btn">
.....
</div>

Untuk Demonya silahkan Klik tombol dibawah
Jika, masih ada yang dibingungkan silahkan komen dibawah :D

Personal Blog.

Berikan komentar anda sesuai Topik yang ada.