Menambahkan Efek Hover Pada Tombol Dengan CSS - KODE IT
Saturday, January 12, 2019
Edit
Halo Teman-teman kali ini KODE IT akan membahas tentang Efek Hover yang
biasanya dipakai untuk gambar, tombol dan lain-lain menggunakan css. Sebelum
kita memberikan contohnya alangkah lebih baik kita mengetahui definisinya
terlebih dahulu.
Nah, Apa itu Hover? Hover dalam bahasa inggris diartikan sebagai arahkan. Kita sebenarnya sudah bahkan sering melakukan hover pada suatu tombol, gambar, link atau yang lainnya.
Hover terjadi apabila kita mengarahkan mouse pada laptop kita ke suatu element HTML seperti tombol, link dan lain lain. Tampilan hover yang default sangatlah membosankan dan bisa dibilang tidak menarik sehingga kita membutuhkan CSS untuk mendekorasinya agar terlihat lebih bagus.
Seperti ini lah tamplilan tombol yang biasa dan yang sudah diberi Style
GIF - CONTOH BUTTON YANG SUDAH DIBERIKAN STYLE DAN EFEK HOVER
GIF - CONTOH BUTTON DEFAULT KETIKA DIHOVER
Sudah tau
kan perbedaannya? sekarang kita akan membuat Tombol atau Button seperti yang
ada di GIF kedua. bagai mana caranya? Simak tutorialnya dibawah ini:
1. Buka Text
editor yang sudah diinstal di komputer atau laptop kalian (Disini saya
menggunakan Visual Studio Karena lebih enak aja menurut saya),
2. Buat
Folder baru dan tambahkan file baru yang berekstensi .html dan .css
3. Kemudian
pada file html tambahkan kode seperti dibawah ini aaaa
<html>
<head>
<title>BUTTON
ANIMATION</title>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link
rel="stylesheet" href="/folder tujuan/style.css">
</head>
<body>
</body>
</html>
<link>
berfungsi agar style bisa terhubung dengan htmlnya
https://use.fontawesome.com/releases/v5.6.3/css/all.css"/
itu adalah link font awesome yang berisikan icon
4. Setelah
itu selesai kemudian tambahkan kode ini diantara <body> </body>
<body>
<!-- CREATED BY RIAN
12/01/2019 13:56 -->
<div
class="middle">
<a class="btn"
href="">
<i class="fab
fa-facebook-f"></i>
</a>
</div>
</body>
5 Setelah
itu kita sekarang menuju file css nya lalu berikan style seperti dibawah ini
/* CREATED BY RIAN 12/01/2019 13:56 */
body{
margin: 0;
padding: 0;
}
.middle{
position: absolute;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%)
}
.btn{
display: inline-block;
width: 90px;
height: 90px;
border-radius: 30%;
background-color: rgb(230, 230,
230);
margin: 10px;
overflow: hidden;
box-shadow: 0 5px 15px -5px
#00000070;
color: blue;
position: relative;
}
.btn i{
line-height: 90x;
font-size: 26px;
padding: 30px;
transition: 0.2s linear;
}
.btn:hover i{
transform: scale(1.3);
color: #f1f1f1;
}
.btn:before{
content: "";
position: absolute;
width: 120%;
height: 120%;
background-color: blue;
transform: rotate(45deg);
left: -110%;
top: 90%;
}
.btn:hover::before{
animation: aaa 0.7s 1;
top: -10%;
left: -10%;
}
@keyframes aaa{
0%{
left: -110%;
top: 90%;
}50%{
left: 10%;
top: -30%;
}100%{
left: -10%;
top: -10%;
}
}
Keterangan :
- Text yang berwarna hitam itu adalah style biasa
- Text yang berwarna merah berfungsi agar pada saat dihover logo F akan menjadi berwarna putih dan ukurannya menjadi 1.3 lebih besar
- Text yang berwarna biru fungsinya untuk membuat element yang berwarna biru dan itu akan muncul pada saat dihover
- Text yang berwarna orange berfungsi untuk memberikan animasi ketika dihover
6. Selesai, Nanti hasilnya akan seperti gif yang kedua
Untuk lihat hasilnya silahkan klik disini
Sampai disini dulu ya Apabila bahasanya tidak beraturan mohon dimaafkan soalnya saya tidak bisa merangkai kata kata dengan baik, Apabila ada kritik dan saran silahkan tulis dikolom komentar. Sekian Terima kasih
- Text yang berwarna hitam itu adalah style biasa
- Text yang berwarna merah berfungsi agar pada saat dihover logo F akan menjadi berwarna putih dan ukurannya menjadi 1.3 lebih besar
- Text yang berwarna biru fungsinya untuk membuat element yang berwarna biru dan itu akan muncul pada saat dihover
- Text yang berwarna orange berfungsi untuk memberikan animasi ketika dihover
6. Selesai, Nanti hasilnya akan seperti gif yang kedua
Untuk lihat hasilnya silahkan klik disini
Sampai disini dulu ya Apabila bahasanya tidak beraturan mohon dimaafkan soalnya saya tidak bisa merangkai kata kata dengan baik, Apabila ada kritik dan saran silahkan tulis dikolom komentar. Sekian Terima kasih