Di artikel kali ini saya akan memberikan tutorial cara membuat button atau tombol hover keren menggunakan HTML dan CSS. Silahkan kalian download dulu gambar png-nya sebagai bahan untuk membuat button hover ini, disini
Pastikan kedua gambar yang sudah kalian download dijadikan satu folder dengan file HTML dan CSS. Langkah pertama, jika kalian sudah membuat file HTML dan CSSnya silahkan masukkan kode dibawah ini,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pixwl play button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#">Play Button</a>
<a href="#">Play Button</a>
</body>
</html>
Jika sudah selesai selanjutnya kita mulai menambahkan warna dan mengatur tata letak menggunakan CSS. Kodenya seperti dibawah ini,
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
background: #111;
}
a{
position: relative;
width: 180px;
height: 60px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
text-align: center;
line-height: 60px;
letter-spacing: 2px;
margin: 20px;
transition: 0.5s;
}
a:hover
{
background: #ec0b36 url(https://i.ibb.co/FxKzwDV/pixel.png);
transition-delay: 0.8s;
background-size: 180px;
animation: animate 0.8s steps(8) forwards;
}
a:nth-child(2):hover
{
background: #730bec url(https://i.ibb.co/3d1y2Pf/pixel2.png);
transition-delay: 0.8s;
background-size: 180px;
animation: animate 0.8s steps(8) forwards;
}
@keyframes animate
{
0%
{
background-position-y: 0;
}
100%
{
background-position-y: -480px;
}
}
Jika sudah semua, selanjutnya kita bisa menyisipkan link ke tombol tersebut, jadi nanti setelah tombolnya diklik maka akan pergi ke link yang dituju. Caranya dibagian
<a href="#">Play Button</a>
<a href="#">Play Button</a>
tanda pagarnya bisa kalian ganti dengan link yang akan kita sisipkan, contoh : <a href="www.facebook.com">Click Here</a> maka setelah tombolnya diklik kita akan pergi ke laman facebook.com.
Sekian tutorial dari saya apabila ada yang ingin ditanyakan silahkan tanyakan melalui komentar dibawah.
0 Response to "Membuat Button Hover Keren Menggunakan HTML dan CSS (Pixel Button Hover)"
Posting Komentar