Component:

Button Product Light

Name: Button Product Light
Availability: InStock

Free

Tailwind

React

Vue

Svelte

Astro

HTML / CSS

Tags: Button UI Element Product Light

Colors:

Description:

This carefully crafted Button component is perfect for Product landing pages, featuring a Light design that looks great and converts well.

Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.


                <!--
@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>

Button Product Light

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions