Компоненты Кнопка «Наверх» кнопка «задом наверх»

кнопка «задом наверх»

Компонент кнопки Back to Top с микровзаимодействиями, цветовой гаммой земляных тонов, простой версткой для бизнес/корпоративных сайтов; адаптивный дизайн с поддержкой темного режима с использованием Tailwind CSS

Предварительный просмотр

HTML-код

<!-- Back to Top Button Component -->
<a href="#top" class="fixed bottom-6 right-6 flex items-center justify-center w-12 h-12 bg-emerald-700 text-white rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-500" aria-label="Back to Top">
  <span class="sr-only">Back to Top</span>
  <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/>
  </svg>
</a>

<!-- To enable smooth scrolling behavior across the page, add the `scroll-smooth` class to your `<html>` element: -->
<!-- <html class="scroll-smooth"> -->

Связанные компоненты

Наверх Компонент кнопки

Отзывчивый компонент кнопки «Вернуться наверх» с дизайном, вдохновленным бумагой/печатью, триадической цветовой схемой и сложными визуальными элементами, подходит для сайтов электронной коммерции. Включает поддержку темного режима.

Открытый

Наверх Компонент кнопки

Отзывчивый компонент кнопки «Наверх», стилизованный в соответствии с принципами Material Design, приглушенными цветами и поддержкой темного режима, подходит для блогов или веб-сайтов для потребления контента.

Открытый

Наверх Компонент кнопки

Отзывчивый компонент кнопки «Наверх» с дизайном Glassmorphism, цветовой схемой земляных тонов и сложными взаимодействиями, подходящий для приборной панели.

Открытый