Наверх Компонент кнопки
Бруталистский компонент кнопки «Наверх» с использованием Tailwind CSS. Этот компонент имеет смелый, высококонтрастный дизайн и поддерживает адаптивные эффекты и темную тему.
HTML-код
<div class="fixed bottom-5 right-5">
<a href="#top" class="bg-white dark:bg-gray-800 text-black dark:text-white p-4 rounded-lg shadow-lg font-bold transition-all duration-300 ease-in-out transform hover:scale-105 hover:bg-gray-300 dark:hover:bg-gray-700">
<span class="text-xl">⬆️</span>
</a>
</div>
<style>
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
/* General styles */
body {
font-family: 'Courier New', Courier, monospace;
background-color: white;
color: black;
transition: background-color 0.5s, color 0.5s;
}
</style>
Связанные компоненты
Кнопка в стиле ар-деко наверх
Сложный, вдохновленный ар-деко компонент кнопки «Back to Top» с геометрическими узорами и роскошными оттенками Ocean/Blue, разработанный для некоммерческих/благотворительных веб-сайтов. Включает адаптивный дизайн и поддержку темного режима.
Кнопка «Наверх»
Адаптивный компонент кнопки «Наверх», разработанный с эффектом стекломорфизма, подходит для профессиональных бизнес-сайтов. Он отличается простой версткой с минимальным количеством элементов и хорошо работает как в светлой, так и в темной темах.
Brutalism_Earth_Tone_Back_To_Top_Button
Кнопка «Вернуться наверх» в стиле брутализма с земляными тонами, разработанная для блогов и контентных сайтов. Он умеренно сложный, отзывчивый и поддерживает темный режим. Кнопка отличается высококонтрастным дизайном и немного грубоватой эстетикой.