Haloo teman-teman Dumet School. Kembali lagi dengan saya di Arif di kursus Website Dumet School. Kali ini saya akan menshare bagaimana membuat Text Animasi Button dengan HTML dan CSS, yuk kita praktekan.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> text button animation </title>
</head>
<body>
<a href="https://www.dumetschool.com/" target="_blank" class="button">
<span data-text="B">B</span>
<span data-text="U">U</span>
<span data-text="T">T</span>
<span data-text="T">T</span>
<span data-text="O">O</span>
<span data-text="N">N</span>
</a>
</body>
</html>
ketikan css berikut
@import url('https://fonts.googleapis.com/css?family=Righteous');
html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #DAD9DE;
}
.button {
width: 200px;
height: 60px;
border: 3px solid salmon;
text-align: center;
font-size: 30px;
line-height: 60px;
overflow: hidden;
text-decoration: none;
border-radius: 32px;
}
.button span {
display: inline-block;
color: salmon;
transition: 0.5s;
font-family: 'Righteous', cursive;
}
.button span:nth-child(odd) {
transform: translateY(-100%);
}
.button span:nth-child(even) {
transform: translateY(100%);
}
.button span::before {
content: attr(data-text);
position: absolute;
color: salmon;
}
.button span:nth-child(odd)::before {
transform: translateY(100%);
}
.button span:nth-child(even)::before {
transform: translateY(-100%);
}
.button:hover span {
transform: translateY(0);
}
seperti ini hasilnya, bila kita hover maka huruf dari tombol animasi tersebut akan bergerak.
sekian tutorial Text Animasi Button dengan HTML dan CSS
The post Text Animasi Button dengan HTML dan CSS appeared first on Kursus Website Terbaik.