Buttons

Buttons Component

A retro-vintage themed button component with triadic color scheme, simple complexity, and responsive design with dark mode support, suitable for a blog or content website.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">

  <!-- Retro Button 1 -->
  <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full m-2
                 transform transition duration-300 hover:scale-105
                 dark:bg-red-700 dark:hover:bg-red-900">
    Click Me (Red)
  </button>

  <!-- Retro Button 2 -->
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full m-2
                 transform transition duration-300 hover:scale-105
                 dark:bg-blue-700 dark:hover:bg-blue-900">
    Click Me (Blue)
  </button>

  <!-- Retro Button 3 -->
  <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded-full m-2
                 transform transition duration-300 hover:scale-105
                 dark:bg-yellow-700 dark:hover:bg-yellow-900">
    Click Me (Yellow)
  </button>

  <!-- Responsive Example: Buttons stack on small screens and are side-by-side on larger screens -->
  <div class="flex flex-col sm:flex-row mt-8">
    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded m-2
                   dark:bg-green-700 dark:hover:bg-green-900">
      Responsive Button 1
    </button>
    <button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded m-2
                   dark:bg-purple-700 dark:hover:bg-purple-900">
      Responsive Button 2
    </button>
  </div>

  <!-- Dark Mode Toggle Placeholder (for visual representation, no JS) -->
  <div class="mt-8 text-gray-700 dark:text-gray-300">
    Toggle your browser/OS dark mode to see changes.
  </div>

</div>

Buttons Component

A responsive buttons component with dark mode support, suitable for e-commerce, featuring a simple triadic color scheme.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6">

  <!-- Product Card Example with Buttons -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-sm mb-8">
    <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/400/300?random=1" alt="Product Image">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Product Title</h3>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Product description goes here. Short and catchy!.</p>
    <div class="flex items-center justify-between mb-4">
      <span class="text-lg font-bold text-gray-900 dark:text-gray-50">$29.99</span>
      <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$39.99</span>
    </div>
    <div class="flex space-x-4">
      <button class="flex-1 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
        Add to Cart
      </button>
      <button class="flex-1 bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
        Buy Now
      </button>
    </div>
  </div>

  <!-- Standalone Buttons Section -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-sm">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Other Actions</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
        View Details
      </button>
      <button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
        Add to Wishlist
      </button>
      <button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
        Contact Seller
      </button>
      <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
        Report Issue
      </button>
    </div>
  </div>

</div>

Buttons Component

A minimalist button component for dashboards, with support for responsive design and dark theme.

Open Preview

                <div class="flex space-x-4 p-4 bg-gray-100 dark:bg-gray-900">
  <!-- Primary Button -->
  <button class="px-4 py-2 rounded-md
    bg-blue-500 text-white font-semibold
    hover:bg-blue-600
    focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
    dark:bg-blue-700 dark:hover:bg-blue-600">
    Primary Action
  </button>

  <!-- Secondary Button -->
  <button class="px-4 py-2 rounded-md
    bg-gray-300 text-gray-800 font-semibold
    hover:bg-gray-400
    focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-opacity-75
    dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
    Secondary Action
  </button>

  <!-- Success Button -->
  <button class="px-4 py-2 rounded-md
    bg-green-500 text-white font-semibold
    hover:bg-green-600
    focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75
    dark:bg-green-700 dark:hover:bg-green-600">
    Success
  </button>

  <!-- Danger Button -->
  <button class="px-4 py-2 rounded-md
    bg-red-500 text-white font-semibold
    hover:bg-red-600
    focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75
    dark:bg-red-700 dark:hover:bg-red-600">
    Delete
  </button>

  <!-- Disabled Button -->
  <button class="px-4 py-2 rounded-md
    bg-gray-200 text-gray-500 font-semibold
    cursor-not-allowed
    dark:bg-gray-800 dark:text-gray-600"
    disabled>
    Disabled
  </button>
</div>

Buttons Component

A Buttons component designed with 3D elements and vibrant colors for social media interfaces, supporting dark theme and responsive design.

Open Preview

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Connect with Us!</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center px-4 py-2 bg-blue-500 dark:bg-blue-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
            <img src="https://picsum.photos/20?random=1" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
            Follow
        </a>
        <a href="#" class="flex items-center justify-center px-4 py-2 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
            <img src="https://picsum.photos/20?random=2" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
            Share
        </a>
        <a href="#" class="flex items-center justify-center px-4 py-2 bg-red-500 dark:bg-red-700 text-white rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 active:scale-95">
            <img src="https://picsum.photos/20?random=3" alt="Button Icon" class="mr-2 w-5 h-5 rounded-full">
            Like
        </a>
    </div>
</div>

A minimalist/flat design Buttons Component with a grayscale color scheme. It is suitable for business/corporate websites and has moderate complexity with some interactive features. It is responsive and supports dark theme using Tailwind CSS.

Open Preview

                <div class="flex flex-wrap justify-center gap-4 p-4">
  <!-- Primary Button -->
  <button class="px-6 py-3 font-semibold text-white bg-gray-800 rounded-md shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-50
                     dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-300">
    Primary Button
  </button>

  <!-- Secondary Button -->
  <button class="px-6 py-3 font-semibold text-gray-800 bg-white border border-gray-300 rounded-md shadow-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50
                     dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800 dark:focus:ring-gray-700">
    Secondary Button
  </button>

  <!-- Tertiary Button -->
  <button class="px-6 py-3 font-semibold text-gray-600 bg-transparent rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50
                     dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-700">
    Tertiary Button
  </button>

  <!-- Disabled Button -->
  <button class="px-6 py-3 font-semibold text-gray-400 bg-gray-200 rounded-md cursor-not-allowed
                     dark:bg-gray-700 dark:text-gray-600" disabled>
    Disabled Button
  </button>

  <!-- Button with Icon -->
  <button class="flex items-center px-6 py-3 font-semibold text-white bg-gray-800 rounded-md shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-50
                     dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-300">
    <svg class="w-5 h-5 mr-2" 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 with Icon
  </button>

  <!-- Outline Button with Icon -->
  <button class="flex items-center px-6 py-3 font-semibold text-gray-800 bg-white border border-gray-300 rounded-md shadow-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 focus:ring-opacity-50
                     dark:bg-gray-900 dark:text-gray-200 dark:border-gray-700 dark:hover:bg-gray-800 dark:focus:ring-gray-700">
    <svg class="w-5 h-5 mr-2" 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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
    Outline Button with Icon
  </button>
</div>

Brutalism Buttons Component

A buttons component with a brutalist design, featuring high-saturation colors, responsive layout, and dark mode support, suitable for business and corporate websites.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-200 dark:bg-gray-900">
    <h1 class="text-4xl font-bold text-purple-600 dark:text-purple-400 mb-6">Choose Your Action</h1>
    <div class="flex space-x-4">
        <button class="px-6 py-3 font-semibold text-white bg-red-600 border-2 border-red-800 rounded-lg shadow-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 dark:bg-red-800 dark:border-red-900 dark:hover:bg-red-700 dark:focus:ring-red-600">
            Primary Action
        </button>
        <button class="px-6 py-3 font-semibold text-white bg-blue-600 border-2 border-blue-800 rounded-lg shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-800 dark:border-blue-900 dark:hover:bg-blue-700 dark:focus:ring-blue-600">
            Secondary Action
        </button>
    </div>
    <div class="flex space-x-4 mt-6">
        <button class="px-6 py-3 text-gray-800 bg-yellow-400 border-2 border-yellow-600 rounded-lg shadow-lg hover:bg-yellow-500 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:bg-yellow-600 dark:border-yellow-800 dark:text-white dark:hover:bg-yellow-500 dark:focus:ring-yellow-400">
            Tertiary Action
        </button>
        <button class="px-6 py-3 text-white bg-green-500 border-2 border-green-700 rounded-lg shadow-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-green-700 dark:border-green-800 dark:hover:bg-green-600 dark:focus:ring-green-400">
            Another Action
        </button>
    </div>
    <div class="mt-6 text-center">
        <img src="https://picsum.photos/200/100" alt="Sample Image" class="rounded-md shadow-lg">
        <div class="flex items-center justify-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/81.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-md">
            <p class="ml-2 text-lg text-gray-700 dark:text-gray-300">John Doe</p>
        </div>
    </div>
</div>

Buttons Component

Open Preview

                <div class="flex flex-wrap gap-4 p-4 bg-gray-100 dark:bg-gray-900">

  <!-- Primary Button -->
  <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    Primary Button
  </button>

  <!-- Secondary Button -->
  <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
    Secondary Button
  </button>

  <!-- Success Button -->
  <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-green-700 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
    Success Button
  </button>

  <!-- Danger Button -->
  <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-red-700 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
    Danger Button
  </button>

  <!-- Outline Button -->
  <button class="bg-transparent hover:bg-blue-200 text-blue-700 font-semibold py-3 px-6 border border-blue-600 rounded-lg shadow-md transition duration-300 ease-in-out dark:border-blue-400 dark:text-blue-400 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    Outline Button
  </button>

  <!-- Disabled Button -->
  <button class="bg-gray-300 text-gray-600 font-bold py-3 px-6 rounded-lg cursor-not-allowed shadow-md dark:bg-gray-700 dark:text-gray-500" disabled>
    Disabled Button
  </button>

</div>

Buttons Component

A Buttons Component designed in Material Design style with a pastel color scheme, responsive for business/corporate websites, and supporting dark themes.

Open Preview

                <div class="flex flex-col space-y-4 p-4 max-w-md mx-auto">
    <!-- Primary Button -->
    <button class="bg-blue-400 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-blue-600 dark:hover:bg-blue-700">
        Primary Button
    </button>
    
    <!-- Secondary Button -->
    <button class="bg-green-400 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-green-600 dark:hover:bg-green-700">
        Secondary Button
    </button>
    
    <!-- Disabled Button -->
    <button class="bg-gray-300 text-gray-500 font-semibold py-2 px-4 rounded shadow-md cursor-not-allowed transition-opacity opacity-70 dark:bg-gray-700 dark:text-gray-400">
        Disabled Button
    </button>
    
    <!-- Outline Button -->
    <button class="border-2 border-blue-400 text-blue-400 font-semibold py-2 px-4 rounded hover:bg-blue-400 hover:text-white transition-colors dark:border-blue-600 dark:text-blue-600 dark:hover:bg-blue-600 dark:hover:text-white">
        Outline Button
    </button>
    
    <!-- Icon Button -->
    <button class="flex items-center bg-yellow-400 hover:bg-yellow-500 text-white font-semibold py-2 px-4 rounded shadow-md transition-transform transform hover:scale-105 dark:bg-yellow-600 dark:hover:bg-yellow-700">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Icon" class="w-5 h-5 mr-2 rounded-full">
        Icon Button
    </button>
</div>

Buttons Component

Responsive Buttons Component with Material Design, Triadic color scheme, and dark theme support.

Open Preview

                <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-gray-800">
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-blue-700 dark:hover:bg-blue-900 transition duration-300 ease-in-out">Primary Button</button>
  <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-green-700 dark:hover:bg-green-900 transition duration-300 ease-in-out">Secondary Button</button>
  <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out">Danger Button</button>
  <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-yellow-700 dark:hover:bg-yellow-900 transition duration-300 ease-in-out">Warning Button</button>
  <button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-purple-700 dark:hover:bg-purple-900 transition duration-300 ease-in-out">Info Button</button>
  <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-gray-700 dark:hover:bg-gray-900 transition duration-300 ease-in-out">Neutral Button</button>
</div>

Buttons Component

A 3D styled buttons component suitable for a portfolio with an analogous color scheme and dark mode support.

Open Preview

                <div class="flex flex-col items-center justify-center mt-10 space-y-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Showcase Your Work</h2>
    <div class="flex space-x-4">
        <a href="#" class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Portfolio</a>
        <a href="#" class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Products</a>
        <a href="#" class="bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold py-2 px-4 rounded-xl shadow-md transform transition-all duration-300 ease-in-out hover:scale-105">Contact</a>
    </div>
</div>

<div class="flex flex-col items-center justify-center mt-10 space-y-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Our Team</h2>
    <div class="flex space-x-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
        <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Team Member" class="rounded-full w-16 h-16 shadow-lg" />
    </div>
</div>

<div class="flex flex-col items-center justify-center mt-10 space-y-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Portfolio Preview</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <img src="https://picsum.photos/id/1011/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
        <img src="https://picsum.photos/id/1012/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
        <img src="https://picsum.photos/id/1013/400/300" alt="Portfolio Item" class="w-full h-auto rounded-xl shadow-xl" />
    </div>
</div>

Categories