Кнопка "Наверх" - Material Design Pastel
Адаптивный компонент кнопки "Back to Top" в соответствии с принципами Material Design с пастельной цветовой гаммой, адаптированный для сайта-портфолио. Он включает в себя адаптивный дизайн и поддержку темного режима с использованием Tailwind CSS.
HTML-код
<button class="fixed bottom-5 right-5 bg-pink-300 text-white p-3 rounded-full shadow-lg transition-opacity hover:opacity-75 focus:outline-none dark:bg-pink-700 dark:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
</button>Связанные компоненты
Кнопка «Наверх»
Минималистичный и отзывчивый компонент кнопки "Back to Top" с поддержкой темного режима. Он появляется после прокрутки вниз и использует плавную прокрутку, чтобы при нажатии возвращать пользователя в верхнюю часть страницы. Для прокрутки не используется JavaScript, только CSS.
Кнопка «Наверх»
Простая кнопка «Наверх» с дизайном Glassmorphism и монохроматической цветовой схемой для сайтов электронной коммерции.
кнопка «задом наверх»
Компонент кнопки Back to Top с микровзаимодействиями, цветовой гаммой земляных тонов, простой версткой для бизнес/корпоративных сайтов; адаптивный дизайн с поддержкой темного режима с использованием Tailwind CSS