Компонент кнопок
Минималистичный/плоский дизайн Buttons Component с цветовой гаммой в оттенках серого. Он подходит для деловых/корпоративных сайтов и имеет умеренную сложность с некоторыми интерактивными функциями. Он адаптивный и поддерживает темную тему с использованием Tailwind CSS.
HTML-код
<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>Связанные компоненты
Компонент кнопок
Минималистичный кнопочный компонент для дашбордов, с поддержкой адаптивного дизайна и темной темы.
Компонент кнопок
Минималистичный компонент кнопок, предназначенный для портфолио, демонстрирующего работу или продукты, с яркими цветами и адаптивным дизайном с поддержкой темных тем с использованием Tailwind CSS.
Компонент кнопок
Компонент адаптивных кнопок с материальным дизайном, триадической цветовой схемой и поддержкой темных тем.