Cara Membuat Efek CSS Roll Hover

Sebelum membahas tentang Cara membuat efek roll hover, sebelumnya saya jelaskan mengenai Roll Hover itu sendiri. Sebenarnya penggunaan istilah roll hover ini agak kurang tepat karena istilah sebenarnya adalah Rollover namun jika dilihat dari cara kerjanya, maka saya lebih menyebutnya sebagai roll hover karena ada efek menggulung pada suatu objek saat disorot oleh mouse. Dan karena adanya efek sorot menggunakan mouse ini, pun ada istilah Mouseover

Jika dilihat dari fungsi dan cara kerjanya, baik roll hover, rollover atau mouseover merupakan salah satu cara atau teknik yang biasanya menggunakan JavaScript untuk mengubah suatu elemen atau objek ketika ada reaksi dari sorot yang menggunakan kursor mouse diatas elemen atau objek tadi. Bingung?

Sorot Disini

Sudah tidak bingung? Itulah efek roll over dengan css, sebuah efek dari rollover yang biasanya menggunakan javascript

Cara Membuat Efek CSS Roll Hover

Salin kode css berikut ini kedalam template blog sobat dengan cara berikut ini:

• Masuk ke akun blogger sobat
• Pilih dan klik menu Template >> Edit HTML >> Ctrl+F pada keyboard
• Cari kode ]]></b:skin> atau </style> dan salin kode berikut sebelum ]]></b:skin> atau </style>
  

  .buttone {
  font-family: Arial, sans-serif;
  font-size: 30px;
  background: #f9760b;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  height: 60px;
  letter-spacing: 2px;
  line-height: 60px;
  margin: 90px 0 0 0;
  min-width: 320px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  -webkit-transition: background-color 0.35s;
  -moz-transition: background-color 0.35s;
  transition: background-color 0.35s;
  overflow: hidden;
  text-decoration: none;
  }
  .buttone span {
  display: block;
  height: 100%;
  padding: 0;
  position: relative;
  top: 0%;
  -webkit-transition: top 0.35s;
  -moz-transition: top 0.35s;
  transition: top 0.35s;
   width: 100%;
  }
  .buttone span:after {
  content: attr(titles);
  display: block;
  }
  .buttone:hover {
  background-color: #eb5200;
  }
  .buttone:hover span {
  top: -100%;
  }
  

• Salin kode html untuk efek roll hover ini kedalam blog sobat. Atau sesuaikan penggunaannya menurut keinginan sobat
  <div class="buttone" >
  <span titles="Jangan Di Sorot">Sorot Disini</span>
  </div>

Bagaimana mudah bukan Cara Membuat Efek CSS Roll Hover?