Cara Membuat Pressed Animated Button
Pada selimut pekat langit, antara waktu lalu dan sketsa baru. Admin memilih mengejar waktu, tanpa melihat lagi punggung bayanganmu. Oke di kesempatan kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Membangun Pressed Animated Button.
Pressed Animated Button yaitu animasi button yang ketika kita klik, tombol akan seperti berupa 3D. Banyak variasi dari Animated Button, tapi perlahan kita satu-satu dulu ya teman-teman hehe. Oke seketika saja, berikut Cara Membangun Pressed Animated Button.
Pertama-tama-tama persiapkan file index.html nya.
Kemudian isi di bagian <body> tag-tag HTML berikut,
<body>
<h2>Animated Button - Pressed Effect</h2>
<button class=button>Click Me</button>
</body>
Berikutnya, ini bagi CSS nya,
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}Bagaimana teman-teman? Lumayan gampang bukan?
Demikianlah bagi panduan kali ini mengenai Cara Membangun Pressed Animated Button.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
