Oleh: SMP Negeri 1 Dolopo Madiun, Jawa Timur, Indonesia | 1 Juni 2015

CARA MEMPERCANTIK WEBSITE BLOGMU DENGAN EFEK HOVER

icondock

Apa itu efek Hover ? singkatnya, hover adalah efek yang akan muncul saat kursor berada diatas selector. Pokoknya keren banget sobat blogger. Dijamin bagus webblog kamu. Untuk lebih jelasnya Anda bisa lihat contoh hover yang anda terapkan seperti script dibawah ini.
Untuk membuat efek seperti itu, ada dua kode yang kita persiapkan, yang pertama adalah kode HTML div, dan kode CSS selector hover. Copikan scrip dibawah ini pada edit HTML blog anda

CSS
.tombol {
text-align: center;
border: 1px solid gainsboro;
width: 100px;
margin: auto;
height: 25px;
line-height: 25px;
}.tombol:hover {
background: rgb(153, 153, 240);
color: white;
}

HTML
<div class=”tombol”>Tekan</div&gt>

Simpan dan silahkan Anda lihat hasilnya. Selain menambahkan efek hover, kita juga bisa membuat efek animasi tombol berputar, dengan efek animasi, silahkan baca panduannya dibawah ini.

Cara Mempercantik Blog dengan Efek Animasi Bergerak

Efek animasi bergerak disini ada dua macam, ada yang harus disentuh (hover) dulu baru efek animasinya bekerja dan ada juga yang otomatis langsung bergerak. Dan kedua efek tersebut akan saya jelaskan secar detail.

Efek Animasi Bergerak dengan Hover

Kita akan melanjutkan kode css tombol ‘tekan’ diatas, untuk membuatnya bergerak atau lebih tepatnya berputar saat kursor menyentuh tombol, maka kita perlu menambahkan efek css rotate berikut ini.

CSS
.tombol {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}.tombol:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg); transform: rotate(360deg);
}

Jadi dengan menerapkan efek css animasi rotate, bukan hanya lebih keren, tapi juga akan membuat blog Anda lebih menarik dan atraktif, dan ujung-ujungnya akan membuat pengunjung betah.

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Kategori

%d blogger menyukai ini: