Minggu, 01 Juni 2014

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

Cara Membuat Efek CSS Roll Hover

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 Anda dengan cara berikut ini:
  • Masuk ke akun blogger Anda
  • 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 Anda. Atau sesuaikan penggunaannya menurut keinginan Anda
    <div class="buttone" >
    <span titles="Jangan Di Sorot">Sorot Disini</span>
    </div>

Bagaimana mudah bukan Cara Membuat Efek CSS Roll Hover?

Cara Membuat Efek CSS Roll Hover Rating: 4.5 Diposkan Oleh: ana sriwahyuni

6 komentar:

  1. ijin coba ya mbak,soalnya saya masih newbie tentang CSS begini,,hehe

    BalasHapus
    Balasan
    1. silahkan dicoba sist, sangat mudah kok :)
      makasih ya..

      Hapus
  2. cantik sekali efek nya ini cocok untuk membuat button downlaod atau membuat keterangan supaya pengunjung blog bisa lebih mudah juga mengerti ya sist :)

    BalasHapus
    Balasan
    1. iya benar mas, lebih memperjelas.. :)

      Hapus
  3. ehheehe...asik jg mainin efeknya Mba..!

    BalasHapus
    Balasan
    1. heheeee awaz kebanyakan bisa ketagihan loh :)

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia