Konten [Tampil]
Di tutorial kali ini kita akan membuat animasi sederhana pada button menggunakan hover. Maskipun sekarang sudah banyak framwork js maupun css yang dapat membuat animasi button dengan lebih mewah dan mudah.
Namun pastinya kita juga ingin membuat animasi button sendiri dengan kreatifitas kita. Nah ditutorial kali ini kami akan membagikan cara sederhana membuat animasi button dengan hover yang dapat kalian kreasikan sesuai keinginan kalian.
Mari ikuti langkah langkah berikut:
1. Buat Code Untuk Tombol
pertama buatlah code untuk menampilkan button di web browser. codenya seperti dibawah ini
copy code dibawah dan pastekan di code editor kalian.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button>Hover Me</button>
</body>
</html>
2. Tambahkan CSS Supaya Lebih Bagus
body{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background-color: black;
}
button{
padding: 10px;
font-size: 20px;
border: none;
background-color: cyan;
border-radius: 10px;
transition: all .5s;
}
button:hover{
background-color: rgb(0, 138, 138);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
}
di bagian ini adalah css yang membuat animasi apabila button di hover background button akan berubah sedikit kalian dapat menkreasikan supaya lebih bagus.
button:hover{
background-color: rgb(0, 138, 138);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
}
Hasilnya
1 Komentar
test
BalasHapus