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