Cara Membuat Pressed Animated Button

Dalam selimut pekat langit, antara masa lalu dan sketsa baru. Aku memilih mengejar waktu, tanpa melihat lagi punggung bayanganmu. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Pressed Animated Button.

Pressed Animated Button adalah 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 langsung saja, berikut Cara Membuat Pressed Animated Button.

Pertama-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>

Selanjutnya, ini untuk 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? Cukup mudah bukan?

Sekian untuk tutorial kali ini tentang Cara Membuat Pressed Animated Button.

Semoga bermanfaat, terima kasih

Kategori