Компоненты Кнопка «Наверх» Наверх кнопка Минималистичный яркий

Наверх кнопка Минималистичный яркий

Минималистичный и плоский компонент кнопки «Наверх» с яркими цветами, подходящий для сайта-портфолио. Он включает в себя адаптивный дизайн и поддержку темного режима с использованием Tailwind CSS.

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

HTML-код

<a href="#" class="fixed bottom-6 right-6 bg-blue-500 hover:bg-blue-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300 dark:bg-blue-700 dark:hover:bg-blue-900">
  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
  </svg>
</a>

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

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

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

Открытый

Кнопка «Наверх»

Адаптивный компонент кнопки «Наверх», разработанный с эффектом стекломорфизма, подходит для профессиональных бизнес-сайтов. Он отличается простой версткой с минимальным количеством элементов и хорошо работает как в светлой, так и в темной темах.

Открытый

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

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

Открытый