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