Кнопка «Наверх»
Простая и элегантная кнопка «вверх», которая отображается в правом нижнем углу экрана. Отличается тонкой пастельной цветовой гаммой и плавным микровзаимодействием при наведении и фокусе. Кнопка имеет адаптивный дизайн со встроенной поддержкой темного режима. При наведении курсора мыши кнопка плавно масштабируется вверх и изменяет цвет фона для обеспечения визуальной обратной связи. Компонент использует только CSS-классы Tailwind, JavaScript не требуется.
HTML-код
<button onclick="window.scrollTo({top: 0, behavior: 'smooth'})" class="fixed bottom-6 right-6 p-3 rounded-full bg-pink-200 dark:bg-pink-900 text-pink-700 dark:text-pink-200 shadow-md hover:bg-pink-300 dark:hover:bg-pink-800 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-700 hover:scale-110 focus:scale-110 transition-all duration-300 group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform group-hover:-translate-y-1 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
<span class="sr-only">Back to top</span>
</button>Связанные компоненты
Наверх Компонент кнопки
Минималистичный и плоский компонент кнопки «Наверх» для приборных панелей с монохроматической цветовой схемой. Она умеренно сложная с интерактивными функциями, адаптивным дизайном и поддержкой темных тем, созданная исключительно с помощью HTML и Tailwind CSS.
Наверх Компонент кнопки
Простая, художественная кнопка «Вернуться наверх», разработанная для веб-сайтов ресторанов и ресторанов, выполнена в акварельном стиле. Он отзывчив и поддерживает темный режим.
Кнопка в стиле ар-деко наверх
Сложный, вдохновленный ар-деко компонент кнопки «Back to Top» с геометрическими узорами и роскошными оттенками Ocean/Blue, разработанный для некоммерческих/благотворительных веб-сайтов. Включает адаптивный дизайн и поддержку темного режима.