Welcome to this tutorial on How to Design Neumorphism Buttons in CSS.

HTML Structure

<div class="neu-wrapper">
  <!-- Outer Shadow Button -->
  <button class="neu-button flat">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
    Like
  </button>
  
  <!-- Inset Shadow Button -->
  <button class="neu-button inset">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
    Secure
  </button>
  
  <!-- Circular Button -->
  <button class="neu-button circle">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
  </button>
</div>

CSS Styling

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');

body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #e0e5ec; font-family: 'Inter', sans-serif; }

.neu-wrapper { display: flex; gap: 40px; align-items: center; }

.neu-button { display: flex; align-items: center; justify-content: center; gap: 12px; border: none; outline: none; background-color: #e0e5ec; color: #4a5568; font-size: 1.1rem; font-weight: 500; font-family: 'Inter', sans-serif; cursor: pointer; transition: all 0.3s ease; }

.neu-button svg { width: 20px; height: 20px; color: #8a98b4; transition: color 0.3s; }
.neu-button:hover svg { color: #3b82f6; }

/* Flat / Outer Shadow */
.flat { padding: 16px 36px; border-radius: 20px; box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5); }
.flat:active { box-shadow: inset 6px 6px 10px rgba(163, 177, 198, 0.6), inset -6px -6px 10px rgba(255, 255, 255, 0.5); }

/* Inset Shadow */
.inset { padding: 16px 36px; border-radius: 20px; box-shadow: inset 6px 6px 10px rgba(163, 177, 198, 0.6), inset -6px -6px 10px rgba(255, 255, 255, 0.5); color: #3b82f6; }
.inset svg { color: #3b82f6; }

/* Circle Button */
.circle { width: 70px; height: 70px; padding: 0; border-radius: 50%; box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5); }
.circle:active { box-shadow: inset 6px 6px 10px rgba(163, 177, 198, 0.6), inset -6px -6px 10px rgba(255, 255, 255, 0.5); }

JavaScript Logic

// Pure CSS Neumorphism! No JS needed.