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