Компонент кнопок
Компонент Neumorphism Buttons с монохроматической цветовой схемой для портфолио, адаптивный с поддержкой темной темы.
HTML-код
<section class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
<div class="flex space-x-4">
<button class="px-6 py-3 text-gray-700 duration-300 ease-in-out bg-gray-300 rounded-full shadow-neumorphic dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphic-dark hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">Primary Button</button>
<button class="px-6 py-3 text-gray-700 duration-300 ease-in-out bg-gray-300 rounded-full shadow-neumorphic dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphic-dark hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">Secondary Button</button>
</div>
<style>
.shadow-neumorphic {
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #4b5563, -7px -7px 15px #374151;
}
.hover\:shadow-neumorphic-hover:hover {
box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}
.dark .hover\:shadow-neumorphic-dark-hover:hover {
box-shadow: inset 5px 5px 10px #4b5563, inset -5px -5px 10px #374151;
}
</style>
</section>Связанные компоненты
Компонент кнопок
Кнопки в стиле Material Design с цветовой схемой в оттенках серого для портфолио, отличающиеся адаптивным дизайном и поддержкой темных тем.
Компонент кнопок
Минималистичный/плоский дизайн Buttons Component с цветовой гаммой в оттенках серого. Он подходит для деловых/корпоративных сайтов и имеет умеренную сложность с некоторыми интерактивными функциями. Он адаптивный и поддерживает темную тему с использованием Tailwind CSS.
Компонент кнопок
Скевоморфизм Аналоговый компонент сложных кнопок приборной панели с адаптивным дизайном и поддержкой темных тем.