Кнопка «Наверх»
Простая кнопка «Наверх» с дизайном Glassmorphism и монохроматической цветовой схемой для сайтов электронной коммерции.
HTML-код
<div class="fixed bottom-10 right-10">
<a href="#top" class="flex items-center justify-center w-12 h-12 rounded-full bg-white bg-opacity-30 backdrop-blur-md shadow-lg hover:bg-opacity-50 transition duration-300 dark:bg-gray-800 dark:bg-opacity-50 dark:hover:bg-opacity-70">
<img src="https://picsum.photos/32" alt="Back to Top" class="w-8 h-8" />
</a>
</div>Связанные компоненты
Наверх Компонент кнопки
Отзывчивая кнопка «Вернуться наверх», которая следует принципам Material Design, поддерживает темный режим с Tailwind CSS для стилизации и адаптивных эффектов.
Наверх Компонент кнопки
Отзывчивая кнопка «Назад наверх» с микровзаимодействиями и яркими цветами, подходящая для интерфейса приборной панели с поддержкой темного режима.
Кнопка «Наверх»
Кнопка «Наверх» Material Design, которая появляется, когда пользователь прокручивает страницу вниз. Он включает в себя поддержку темного режима и плавную прокрутку.