Button Neumorphism

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

Đồng bộ màu nền (Background Match): Quy tắc cốt lõi của Neumorphism là màu nền của phần tử phải hoàn toàn trùng khớp với màu nền của container chứa nó (ở đây là #e0e5ec).
Sử dụng 2 bóng đổ (Double Box-Shadow): Bằng cách kết hợp một bóng sáng màu trắng ở góc trên bên trái (đóng vai trò nguồn sáng) và một bóng tối ở góc dưới bên phải, chúng ta có thể giả lập hiệu ứng 3D nổi bật.
Trạng thái Active (Click): Khi người dùng tương tác, việc sử dụng thuộc tính inset bên trong box-shadow sẽ đảo ngược hướng đổ bóng, tạo cảm giác như button vừa bị nhấn lún xuống.