Neumorphism (hay Soft UI) là một xu hướng thiết kế mang lại hiệu ứng thị giác đặc biệt, làm cho các thành phần UI trông như đang trồi lên hoặc lõm xuống từ chính background của nó. Trong snippet này, chúng ta sẽ xây dựng một button với các trạng thái lồi và lõm cực kỳ chân thực khi hover và click (active), hoàn toàn chỉ sử dụng HTML và CSS.

Mã nguồn (Source Code)

Bạn có thể copy đoạn code dưới đây và đưa vào dự án của mình.

<!-- 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;
  /* Trạng thái bình thường: Đổ bóng ra bên ngoài để tạo hiệu ứng nổi lên */
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), 
             -9px -9px 16px rgba(255, 255, 255, 0.5);
}

.neumorphism-btn:hover {
  /* Trạng thái hover: Làm cho bóng nhỏ lại một chút để thể hiện dấu hiệu bị nhấn xuống */
  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 {
  /* Trạng thái active (click): Đổ bóng vào bên trong để tạo hiệu ứng lõm xuống */
  box-shadow: inset 6px 6px 10px 0 rgba(163, 177, 198, 0.6), 
              inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
}

Giải thích chi tiết