Tombol Neumorphism

Desain Neumorphism adalah gaya visual yang memberikan ilusi seolah-olah suatu elemen mencuat dari latar belakangnya atau sebaliknya, tenggelam ke dalamnya. Pada snippet ini, kami merancang tombol yang merepresentasikan efek tiga dimensi serealistis mungkin—baik saat berada dalam status hover maupun active (saat diklik)—hanya dengan menggunakan HTML dan CSS.

Kode Implementasi

Silakan salin kode di bawah ini dan integrasikan ke dalam proyek Anda.

<!-- HTML -->
<div class="neumorphism-wrapper">
  <button class="neumorphism-btn">Neumorphism</button>
</div>

/* CSS */
.neumorphism-wrapper {
  background-color: #e0e5ec;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.neumorphism-btn {
  background-color: #e0e5ec;
  color: #4a5568;
  border: none;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  /* Status normal: Menambahkan bayangan di luar agar terlihat melayang */
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), 
             -9px -9px 16px rgba(255, 255, 255, 0.5);
}

.neumorphism-btn:hover {
  /* Status hover: Memperkecil bayangan untuk memberikan kesan akan ditekan */
  box-shadow: 5px 5px 10px rgba(163, 177, 198, 0.6), 
             -5px -5px 10px rgba(255, 255, 255, 0.5);
  color: #2d3748;
}

.neumorphism-btn:active {
  /* Status aktif (klik): Menambahkan bayangan di dalam untuk memberikan kesan cekung */
  box-shadow: inset 6px 6px 10px 0 rgba(163, 177, 198, 0.6), 
              inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
}

Penjelasan Implementasi

Penyelarasan Warna Latar: Sebagai prinsip dasar Neumorphism, Anda harus menyamakan warna latar elemen (background-color) dengan warna latar kontainernya (contoh: #e0e5ec).
Bayangan Ganda (box-shadow): Efek tiga dimensi diciptakan dengan mengkombinasikan bayangan terang (sebagai sumber cahaya) di sudut kiri atas, serta bayangan gelap di sudut kanan bawah.
Status Aktif: Dengan menyisipkan kata kunci inset pada properti box-shadow, Anda dapat mewujudkan efek visual cekung yang realistis saat tombol ditekan.