Buttons Component
A simple buttons component styled with Material Design, using a monochromatic color scheme and supporting dark mode, suitable for business/corporate websites.
HTML Code
<div class="flex flex-col items-center space-y-4 p-6 bg-gray-100 dark:bg-gray-800">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Buttons Component</h2>
<div class="flex space-x-4">
<button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Primary Button</button>
<button class="px-6 py-2 rounded border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white dark:border-blue-800 dark:text-blue-200 dark:hover:bg-blue-800 dark:hover:text-white">Secondary Button</button>
</div>
<div class="flex space-x-4">
<button class="px-6 py-2 rounded bg-gray-300 text-gray-800 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">Tertiary Button</button>
<button class="px-6 py-2 rounded bg-transparent border border-gray-300 text-gray-800 hover:bg-gray-300 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700">Outlined Button</button>
</div>
<div class="flex space-x-4">
<button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Large Button</button>
<button class="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Medium Button</button>
<button class="px-2 py-1 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Small Button</button>
</div>
</div>Related Components
Neumorphic Buttons Component
A button component featuring a neumorphic design style with responsive effects and dark theme support using Tailwind CSS.
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.
Buttons Component
A Buttons component designed with 3D elements and vibrant colors for social media interfaces, supporting dark theme and responsive design.