Наверх Компонент кнопки
Отзывчивая кнопка «Вернуться наверх», которая следует принципам Material Design, поддерживает темный режим с Tailwind CSS для стилизации и адаптивных эффектов.
HTML-код
<div class="fixed bottom-5 right-5 z-50">
<button class="bg-blue-500 text-white rounded-full p-2 shadow-lg transition-transform transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:shadow-md dark:focus:ring-blue-300">
<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="M12 4v16m0 0L8 16m4 4l4-4" />
</svg>
</button>
</div>
<style>
/* Tailwind dark mode support */
@media (prefers-color-scheme: dark) {
.bg-blue-500 { background-color: #3b82f6; }
.bg-blue-700 { background-color: #2563eb; }
.text-white { color: #ffffff; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.dark .shadow-md { box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); }
}
</style>Связанные компоненты
Кнопка «Брутализм наверх»
Наверх Компонент кнопки в стиле брутализм, цветовая схема Triadic и сложная сложность. Адаптивный дизайн с поддержкой темных тем. Нет JavaScript.
Кнопка «Наверх»
Простая и элегантная кнопка «вверх», которая отображается в правом нижнем углу экрана. Отличается тонкой пастельной цветовой гаммой и плавным микровзаимодействием при наведении и фокусе. Кнопка имеет адаптивный дизайн со встроенной поддержкой темного режима. При наведении курсора мыши кнопка плавно масштабируется вверх и изменяет цвет фона для обеспечения визуальной обратной связи. Компонент использует только CSS-классы Tailwind, JavaScript не требуется.
Кнопка "Наверх" - 3D Дизайн
Кнопка «Наверх» с 3D-дизайном, адаптивными эффектами и поддержкой темной темы с помощью Tailwind CSS. JavaScript не включен.