Наверх Компонент кнопки
Отзывчивая кнопка «Наверх», выполненная в скевоморфном стиле, с поддержкой темных тем и отзывчивыми эффектами.
HTML-код
<div class="fixed bottom-10 right-10 z-50">
<a href="#top" class="bg-white dark:bg-gray-800 rounded-full shadow-lg p-3 transition-transform transform hover:scale-110">
<img src="https://picsum.photos/50/50?random=1" alt="Back to Top" class="w-full h-full rounded-full">
</a>
<div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white text-sm rounded-lg shadow-md p-2 mt-2 text-center">
Back to Top
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-white { background-color: #1f2937; }
.bg-gray-200 { background-color: #4b5563; }
.bg-gray-700 { background-color: #2d3748; }
.text-gray-800 { color: #f7fafc; }
}
</style>
Связанные компоненты
Кнопка «Наверх»
Кнопка «Наверх» Material Design, которая появляется, когда пользователь прокручивает страницу вниз. Он включает в себя поддержку темного режима и плавную прокрутку.
Кнопка «Наверх»
Адаптивный компонент кнопки «Наверх», разработанный с эффектом стекломорфизма, подходит для профессиональных бизнес-сайтов. Он отличается простой версткой с минимальным количеством элементов и хорошо работает как в светлой, так и в темной темах.
Наверх Компонент кнопки
Бруталистский компонент кнопки «Наверх» с использованием Tailwind CSS. Этот компонент имеет смелый, высококонтрастный дизайн и поддерживает адаптивные эффекты и темную тему.