Кнопка «Добавить в корзину»
Скевоморфный компонент кнопки «Добавить в корзину», разработанный с использованием Tailwind CSS, с адаптивными эффектами и поддержкой темных тем.
HTML-код
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 flex items-center space-x-4 transition-transform transform hover:scale-105">
<img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-lg shadow">
<div class="flex-1">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product Name</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
</div>
<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:bg-blue-400 transition duration-200">
Add to Cart
</button>
</div>
</div>Связанные компоненты
Luxury_Retro_Add_to_Cart_Button
Элегантный компонент кнопки «Добавить в корзину» (или «Запросить сейчас» для недвижимости) с ощущением роскоши/премиум-класса и цветовой палитрой ретро/винтаж. Разработан для платформ недвижимости, отличается адаптивным дизайном и поддержкой темного режима.
Кнопка «Добавить в корзину»
Скевоморфная кнопка «Добавить в корзину» с адаптивными эффектами и поддержкой темной темы.
Добавить в корзину компонент кнопки
Отзывчивый компонент кнопки «Добавить в корзину» с триадическими цветами, фокусом микровзаимодействия и поддержкой темного режима для приложений электронной коммерции.