Кнопка «Наверх»
Простая и элегантная кнопка «вверх», которая отображается в правом нижнем углу экрана. Отличается тонкой пастельной цветовой гаммой и плавным микровзаимодействием при наведении и фокусе. Кнопка имеет адаптивный дизайн со встроенной поддержкой темного режима. При наведении курсора мыши кнопка плавно масштабируется вверх и изменяет цвет фона для обеспечения визуальной обратной связи. Компонент использует только 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>Связанные компоненты
Кнопка «Наверх»
Минималистичная, плоская кнопка «Наверх», которая помещается в интерфейсе приборной панели. Кнопка выполнена в монохроматической цветовой гамме и включает эффекты наведения и фокусировки для лучшей интерактивности. Он также отзывчив и поддерживает темный режим.
Наверх Компонент кнопки
Отзывчивая кнопка «Вернуться наверх» с художественным акварельным дизайном, осенней цветовой гаммой и поддержкой темного режима, подходит для блогов/контентных сайтов.
Наверх Компонент кнопки
Кнопка «Вернуться наверх» для CRM/Business Tools, выполненная в стиле Баухаус с высококонтрастными цветами, геометрическими формами и отзывчивостью для всех размеров экрана, включая поддержку темного режима.