Text Animasi Button dengan HTML dan CSS
Haloo teman-teman Source Code Aplikasi. Kembali lagi dengan saya di Arif di kursus Laman Source Code Aplikasi. Kali ini saya akan menshare bagaimana merancang 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.sourcecodeaplikasi.info/ 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 karenanya huruf dari tombol animasi tersebut akan bergerak.
demikian panduan Text Animasi Button dengan HTML dan CSS
Sumber https://kursuswebsite.org
