Кнопка Neumorphic Вернуться наверх
Неоморфная кнопка «Вернуться наверх» для электронной коммерции, предлагающая тонкий, мягкий дизайн пользовательского интерфейса, который сливается с фоном с помощью нежных теней. Он отличается аналогичными цветами для гармоничного внешнего вида, простым макетом и адаптивным дизайном с поддержкой темных тем, что идеально подходит для покупок в Интернете.
HTML-код
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<a href="#" class="back-to-top-button relative p-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center transition-all duration-300 hover:shadow-neumorphic-light-hover dark:hover:shadow-neumorphic-dark-hover"
aria-label="Back to top">
<svg class="w-6 h-6 text-indigo-600 dark:text-purple-400" 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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
</svg>
</a>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 8px 8px 16px #cbced1, -8px -8px 16px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #2e2e2e;
}
.shadow-neumorphic-light-hover {
box-shadow: inset 6px 6px 12px #cbced1, inset -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark-hover {
box-shadow: inset 6px 6px 12px #1a1a1a, inset -6px -6px 12px #2e2e2e;
}
</style>Связанные компоненты
Кнопка Glassmorphism Rainbow Back to Top для сельского хозяйства
Сложный, адаптивный компонент кнопки «Вернуться наверх» с дизайном стекломорфизма и радужным градиентом, адаптированный для веб-сайтов о сельском хозяйстве и фермерстве. Особенности, эффекты размытия и поддержка темного режима.
Наверх Компонент кнопки
Отзывчивый компонент кнопки «Наверх» для сайтов электронной коммерции с черно-белым монохромным дизайном с ярким акцентным цветом и привлекательным микровзаимодействием при наведении. Включает поддержку темного режима.
Наверх Компонент кнопки
Бруталистский компонент кнопки «Наверх» с использованием Tailwind CSS. Этот компонент имеет смелый, высококонтрастный дизайн и поддерживает адаптивные эффекты и темную тему.