Компонент кнопок
Минималистичный компонент кнопок, разработанный с помощью Tailwind CSS, с адаптивными эффектами и поддержкой темных тем.
HTML-код
<div class="flex flex-wrap space-x-4 justify-center p-6">
<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
Primary Button
</button>
<button class="bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
Secondary Button
</button>
<button class="bg-green-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
Success Button
</button>
<button class="bg-red-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
Danger Button
</button>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-blue-500 { background-color: #2563eb; }
.bg-gray-300 { background-color: #4b5563; }
.bg-green-500 { background-color: #22c55e; }
.bg-red-500 { background-color: #ef4444; }
.text-white { color: #ffffff; }
.text-gray-800 { color: #f9fafb; }
.shadow-md { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
}
</style>Связанные компоненты
Компонент «Неморфные кнопки»
Компонент кнопки с неоморфным стилем дизайна с адаптивными эффектами и поддержкой темной темы с использованием Tailwind CSS.
Компонент кнопок
Компонент отзывчивых кнопок с поддержкой темного режима для портфолио. Отличается минималистичным плоским дизайном в оттенках серого с умеренной сложностью.
Компонент кнопок
Минималистичный/плоский дизайн Buttons Component с цветовой гаммой в оттенках серого. Он подходит для деловых/корпоративных сайтов и имеет умеренную сложность с некоторыми интерактивными функциями. Он адаптивный и поддерживает темную тему с использованием Tailwind CSS.