Components Buttons Material Design Buttons Component

Material Design Buttons Component

Material Design Buttons Component in Earth Tones for Social Media

Preview

HTML Code

```html
<div class="flex flex-col items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
  <div class="flex space-x-4 rtl:space-x-reverse">
    <button class="px-4 py-2 bg-amber-600 text-white dark:bg-amber-700 dark:text-stone-200 rounded-md shadow-md hover:bg-amber-700 dark:hover:bg-amber-800 transition duration-300 ease-in-out">Like</button>
    <button class="px-4 py-2 bg-stone-400 text-stone-800 dark:bg-stone-600 dark:text-stone-200 rounded-md shadow-md hover:bg-stone-500 dark:hover:bg-stone-700 transition duration-300 ease-in-out">Comment</button>
    <button class="px-4 py-2 bg-green-600 text-white dark:bg-green-700 dark:text-stone-200 rounded-md shadow-md hover:bg-green-700 dark:hover:bg-green-800 transition duration-300 ease-in-out">Share</button>
  </div>
</div>
```

Related Components

Buttons Component

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

Glassmorphism Buttons Component

Glassmorphism Buttons using Earth Tones for responsive Portfolio site with dark mode

Open

Buttons Component

A responsive buttons component with dark mode support for portfolios. Features minimalist flat design in grayscale with moderate complexity.

Open