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