Кнопка «Добавить в корзину»
Компонент кнопки «Добавить в корзину» с 3D-дизайном с адаптивными эффектами и поддержкой темной темы с использованием Tailwind CSS.
HTML-код
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative group">
<button class="relative px-6 py-2 font-bold text-white transition-transform duration-300 bg-blue-600 rounded-lg shadow-lg transform hover:scale-105 active:scale-95 dark:bg-blue-700">
<span class="absolute top-0 left-0 w-full h-full rounded-lg bg-blue-500 opacity-60 transition-opacity duration-300 group-hover:opacity-100"></span>
<span class="relative z-10">Add to Cart</span>
</button>
<div class="absolute right-0 -top-1 -mr-4 z-0 w-10 h-10 bg-blue-200 rounded-full shadow-lg transform scale-75 transition-all duration-300 group-hover:scale-100"></div>
</div>
</div>
Связанные компоненты
Добавить в корзину компонент кнопки
Сложная кнопка «Добавить в корзину», разработанная в стиле ретро/винтаж и дополненная цветовая гамма, подходит для профессионального сайта компании. Этот компонент поддерживает темный режим и является адаптивным, используя Tailwind CSS для стилизации.
Добавить в корзину компонент кнопки
Компонент кнопки «Добавить в корзину» в стиле ретро/винтаж для приложений электронной коммерции. Эта кнопка имеет ностальгический дизайн, вдохновленный 80-ми и 90-ми годами, с использованием аналогичной цветовой гаммы и эффектами для интерактивности. Он отзывчив и поддерживает темные темы.
Кнопка «Добавить в корзину»
Скевоморфная кнопка «Добавить в корзину» с адаптивными эффектами и поддержкой темной темы.