Добавить в корзину компонент кнопки
Компонент кнопки «Добавить в корзину» в 3D-стиле с яркими цветами, адаптивным дизайном и поддержкой темной темы с использованием Tailwind CSS.
HTML-код
<div class="flex justify-center items-center p-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 transform transition-transform hover:scale-105">
<div class="flex justify-between items-center mb-4">
<img src="https://picsum.photos/50" alt="Product Image" class="w-16 h-16 rounded-full border-2 border-violet-600 shadow-lg">
<div class="ml-4">
<h2 class="text-lg font-bold text-violet-700 dark:text-violet-300">Product Name</h2>
<p class="text-md text-gray-600 dark:text-gray-300">$49.99</p>
</div>
</div>
<button class="w-full bg-violet-600 hover:bg-violet-700 dark:bg-violet-700 dark:hover:bg-violet-600 text-white font-bold py-2 px-4 rounded-lg shadow-2xl transform hover:translate-y-1 transition-all duration-200 ease-in-out">
Add to Cart
</button>
</div>
</div>Связанные компоненты
Добавить в корзину компонент кнопки
Компонент кнопки «Добавить в корзину» в стиле ретро/винтаж для приложений электронной коммерции. Эта кнопка имеет ностальгический дизайн, вдохновленный 80-ми и 90-ми годами, с использованием аналогичной цветовой гаммы и эффектами для интерактивности. Он отзывчив и поддерживает темные темы.
Добавить в корзину компонент кнопки
Компонент кнопки «Добавить в корзину», вдохновленный брутализмом, с Tailwind CSS, отличающийся высокой контрастностью, необычными макетами, адаптивными эффектами и поддержкой темных тем.
Добавить в корзину компонент кнопки
Сложная кнопка «Добавить в корзину», разработанная в стиле ретро/винтаж и дополненная цветовая гамма, подходит для профессионального сайта компании. Этот компонент поддерживает темный режим и является адаптивным, используя Tailwind CSS для стилизации.