Button Product Light

                <!--
@type: Button
@industry: Product
@style: Light
@category: UI Element
@framework: HTML/CSS
@license: Free
-->

<style>
:root {
  /* Colors */
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-200: #e5e7eb;
  --color-gray-400: #9ca3af;
  --color-gray-600: #4b5563;
  --color-gray-800: #1f2937;
  --color-blue-100: #dbeafe;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-green-50: #f0fdf4;
  --color-green-200: #bbf7d0;
  --color-green-700: #15803d;

  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;

  /* Container */
  --container-max-width: 72rem; /* max-w-6xl */
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base Styles */
body {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
}

/* Component Styles */
.button-section {
  background-color: var(--color-gray-50);
  padding: var(--spacing-12) var(--spacing-6);
}

.button-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.button-groups {
  margin-bottom: var(--spacing-10);
}

.button-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-6);
}

.button-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-6);
  align-items: center;
}

/* Primary Buttons */
.button-primary {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-800);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
  cursor: pointer;
}

.button-primary:hover {
  background-color: var(--color-gray-50);
}

.button-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-blue-100);
}

/* Button Sizes */
.button-sm {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: 0.875rem;
}

.button-md {
  padding: var(--spacing-3) var(--spacing-6);
  font-size: 1rem;
}

.button-lg {
  padding: var(--spacing-4) var(--spacing-8);
  font-size: 1.125rem;
}

.button-xs {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: 0.75rem;
  border-radius: 0.375rem;
}

/* Accent Buttons */
.button-accent {
  background-color: var(--color-blue-600);
  color: var(--color-white);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}

.button-accent:hover {
  background-color: var(--color-blue-700);
}

/* Icon Buttons */
.button-icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.button-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Quantity Controls */
.quantity-group {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-gray-200);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.quantity-button {
  background-color: var(--color-white);
  color: var(--color-gray-800);
  padding: var(--spacing-3) var(--spacing-4);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.quantity-button svg {
  width: 1.25rem;
  height: 1.25rem;
}

.quantity-button:hover {
  background-color: var(--color-gray-50);
}

.quantity-button:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-blue-100);
}

.quantity-display {
  padding: var(--spacing-3) var(--spacing-4);
  background-color: var(--color-white);
  color: var(--color-gray-800);
}

/* Button States */
.button-disabled {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-400);
  cursor: not-allowed;
  border-radius: 0.5rem;
}

.button-loading {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-600);
  cursor: wait;
  border-radius: 0.5rem;
}

.button-success {
  background-color: var(--color-green-50);
  border: 1px solid var(--color-green-200);
  color: var(--color-green-700);
  border-radius: 0.5rem;
}

/* Animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}
.animate-spin circle {
  opacity: 0.25;
}
.animate-spin path {
  opacity: 0.75;
}

/* Responsive Breakpoints */
@media (min-width: 768px) {
  .button-section {
    padding: var(--spacing-12) var(--spacing-8);
  }
}
</style>

<section class="button-section">
  <div class="button-container">
    <!-- Primary Buttons -->
    <div class="button-groups">
      <h2 class="button-title">Primary Actions</h2>
      <div class="button-flex">
        <!-- Small -->
        <button 
          type="button"
          class="button-primary button-sm"
          aria-label="Small primary button"
        >
          Add to Cart
        </button>
        
        <!-- Medium (Default) -->
        <button 
          type="button"
          class="button-primary button-md"
          aria-label="Medium primary button"
        >
          Buy Now
        </button>
        
        <!-- Large -->
        <button 
          type="button"
          class="button-primary button-lg"
          aria-label="Large primary button"
        >
          Checkout
        </button>
      </div>
    </div>

    <!-- Accent Buttons -->
    <div class="button-groups">
      <h2 class="button-title">Accent Actions</h2>
      <div class="button-flex">
        <!-- Small -->
        <button 
          type="button"
          class="button-accent button-sm"
          aria-label="Small accent button"
        >
          Quick Buy
        </button>
        
        <!-- Medium (Default) -->
        <button 
          type="button"
          class="button-accent button-md"
          aria-label="Medium accent button"
        >
          Pre-order Now
        </button>
        
        <!-- Large -->
        <button 
          type="button"
          class="button-accent button-lg"
          aria-label="Large accent button"
        >
          Limited Offer
        </button>
      </div>
    </div>

    <!-- Icon Buttons -->
    <div class="button-groups">
      <h2 class="button-title">Icon Buttons</h2>
      <div class="button-flex">
        <!-- Cart Button -->
        <button 
          type="button"
          class="button-primary button-md button-icon"
          aria-label="Add to cart button with icon"
        >
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
          Add to Cart
        </button>

        <!-- Wishlist Button -->
        <button 
          type="button"
          class="button-primary button-md button-icon"
          aria-label="Add to wishlist button with icon"
        >
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
          </svg>
          Save to Wishlist
        </button>

        <!-- Share Button -->
        <button 
          type="button"
          class="button-primary button-md button-icon"
          aria-label="Share product button with icon"
        >
          Share
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
          </svg>
        </button>
      </div>
    </div>

    <!-- Quantity Button Group -->
    <div class="button-groups">
      <h2 class="button-title">Quantity Controls</h2>
      <div class="button-flex">
        <div class="quantity-group">
          <button 
            type="button"
            class="quantity-button"
            aria-label="Decrease quantity"
          >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
            </svg>
          </button>
          <span class="quantity-display">1</span>
          <button 
            type="button"
            class="quantity-button"
            aria-label="Increase quantity"
          >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- States -->
    <div class="button-groups">
      <h2 class="button-title">Button States</h2>
      <div class="button-flex">
        <!-- Disabled -->
        <button 
          type="button"
          class="button-disabled button-md"
          aria-label="Disabled button"
          disabled
        >
          Out of Stock
        </button>

        <!-- Loading -->
        <button 
          type="button"
          class="button-loading button-md button-icon"
          aria-label="Loading button"
          disabled
        >
          <svg class="animate-spin" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          Processing
        </button>

        <!-- Success -->
        <button 
          type="button"
          class="button-success button-md button-icon"
          aria-label="Success button"
        >
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
          Added to Cart
        </button>
      </div>
    </div>

    <!-- Size Variants -->
    <div class="button-groups">
      <h2 class="button-title">Size Variations</h2>
      <div class="button-flex">
        <button 
          type="button"
          class="button-primary button-xs"
          aria-label="Extra small button"
        >
          XS
        </button>
        <button 
          type="button"
          class="button-primary button-sm"
          aria-label="Small button"
        >
          Small
        </button>
        <button 
          type="button"
          class="button-primary button-md"
          aria-label="Medium button"
        >
          Medium
        </button>
        <button 
          type="button"
          class="button-primary button-lg"
          aria-label="Large button"
        >
          Large
        </button>
      </div>
    </div>
  </div>
</section>
            

                <!--
@type: Button
@industry: Product
@style: Light
@category: UI Element
@framework: Tailwind
@license: Free
-->

<section class="bg-gray-50 py-12 px-6 md:px-8 font-sans">
  <div class="max-w-6xl mx-auto">
    <!-- Primary Buttons -->
    <div class="mb-10">
      <h2 class="text-xl font-medium text-gray-800 mb-6">Primary Actions</h2>
      <div class="flex flex-wrap gap-6 items-center">
        <!-- Small -->
        <button 
          type="button"
          class="bg-white border border-gray-200 text-gray-800 px-4 py-2 text-sm rounded-lg hover:bg-gray-50 shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-blue-100"
          aria-label="Small primary button"
        >
          Add to Cart
        </button>
        
        <!-- Medium (Default) -->
        <button 
          type="button"
          class="bg-white border border-gray-200 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-blue-100"
          aria-label="Medium primary button"
        >
          Buy Now
        </button>
        
        <!-- Large -->
        <button 
          type="button"
          class="bg-white border border-gray-200 text-gray-800 px-8 py-4 text-lg rounded-lg hover:bg-gray-50 shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-blue-100"
          aria-label="Large primary button"
        >
          Checkout
        </button>
      </div>
    </div>

    <!-- Accent Buttons -->
    <div class="mb-10">
      <h2 class="text-xl font-medium text-gray-800 mb-6">Accent Actions</h2>
      <div class="flex flex-wrap gap-6 items-center">
        <!-- Small -->
        <button 
          type="button"
          class="bg-blue-600 text-white px-4 py-2 text-sm rounded-lg hover:bg-blue-700 shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-blue-100"
          aria-label="Small accent button"
        >
          Quick Buy
        </button>
        
        <!-- Medium (Default) -->
        <button 
          type="button"
          class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-blue-100"
          aria-label="Medium accent button"
        >
          Pre-order Now
        </button>
        
        <!-- Large -->
        <button 
          type="button"
          class="bg-blue-600 text-white px-8 py-4 text-lg rounded-lg hover:bg-blue-700 shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-blue-100"
          aria-label="Large accent button"
        >
          Limited Offer
        </button>
      </div>
    </div>

    <!-- Icon Buttons -->
    <div class="mb-10">
      <h2 class="text-xl font-medium text-gray-800 mb-6">Icon Buttons</h2>
      <div class="flex flex-wrap gap-6 items-center">
        <!-- Cart Button -->
        <button 
          type="button"
          class="flex items-center gap-2 bg-white border border-gray-200 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-blue-100"
          aria-label="Add to cart button with icon"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
          Add to Cart
        </button>

        <!-- Wishlist Button -->
        <button 
          type="button"
          class="flex items-center gap-2 bg-white border border-gray-200 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-blue-100"
          aria-label="Add to wishlist button with icon"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
          </svg>
          Save to Wishlist
        </button>

        <!-- Share Button -->
        <button 
          type="button"
          class="flex items-center gap-2 bg-white border border-gray-200 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-blue-100"
          aria-label="Share product button with icon"
        >
          Share
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
          </svg>
        </button>
      </div>
    </div>

    <!-- Quantity Button Group -->
    <div class="mb-10">
      <h2 class="text-xl font-medium text-gray-800 mb-6">Quantity Controls</h2>
      <div class="flex flex-wrap gap-6 items-center">
        <div class="inline-flex items-center border border-gray-200 rounded-lg overflow-hidden shadow-sm">
          <button 
            type="button"
            class="bg-white text-gray-800 px-4 py-3 hover:bg-gray-50 transition-all focus:outline-none focus:ring-2 focus:ring-blue-100 focus:ring-inset"
            aria-label="Decrease quantity"
          >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
            </svg>
          </button>
          <span class="px-4 py-3 bg-white text-gray-800">1</span>
          <button 
            type="button"
            class="bg-white text-gray-800 px-4 py-3 hover:bg-gray-50 transition-all focus:outline-none focus:ring-2 focus:ring-blue-100 focus:ring-inset"
            aria-label="Increase quantity"
          >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- States -->
    <div class="mb-10">
      <h2 class="text-xl font-medium text-gray-800 mb-6">Button States</h2>
      <div class="flex flex-wrap gap-6 items-center">
        <!-- Disabled -->
        <button 
          type="button"
          class="bg-white border border-gray-200 text-gray-400 px-6 py-3 rounded-lg shadow-sm cursor-not-allowed"
          aria-label="Disabled button"
          disabled
        >
          Out of Stock
        </button>

        <!-- Loading -->
        <button 
          type="button"
          class="flex items-center gap-2 bg-white border border-gray-200 text-gray-600 px-6 py-3 rounded-lg shadow-sm cursor-wait"
          aria-label="Loading button"
          disabled
        >
          <svg class="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          Processing
        </button>

        <!-- Success -->
        <button 
          type="button"
          class="flex items-center gap-2 bg-green-50 border border-green-200 text-green-700 px-6 py-3 rounded-lg shadow-sm"
          aria-label="Success button"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
          Added to Cart
        </button>
      </div>
    </div>

    <!-- Size Variants -->
    <div class="mb-10">
      <h2 class="text-xl font-medium text-gray-800 mb-6">Size Variations</h2>
      <div class="flex flex-wrap gap-4 items-center">
        <button 
          type="button"
          class="bg-white border border-gray-200 text-gray-800 px-3 py-1 text-xs rounded-md hover:bg-gray-50 shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-blue-100"
          aria-label="Extra small button"
        >
          XS
        </button>
        <button 
          type="button"
          class="bg-white border border-gray-200 text-gray-800 px-4 py-2 text-sm rounded-lg hover:bg-gray-50 shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-blue-100"
          aria-label="Small button"
        >
          Small
        </button>
        <button 
          type="button"
          class="bg-white border border-gray-200 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-blue-100"
          aria-label="Medium button"
        >
          Medium
        </button>
        <button 
          type="button"
          class="bg-white border border-gray-200 text-gray-800 px-8 py-4 text-lg rounded-lg hover:bg-gray-50 shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-blue-100"
          aria-label="Large button"
        >
          Large
        </button>
      </div>
    </div>
  </div>
</section>