Добавить в корзину компонент кнопки
Отзывчивый компонент кнопки «Добавить в корзину» с триадическими цветами, фокусом микровзаимодействия и поддержкой темного режима для приложений электронной коммерции.
HTML-код
<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
<button class="group relative flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold
bg-emerald-500 text-white
hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700
transition-all duration-300 ease-in-out
overflow-hidden
shadow-lg hover:shadow-xl
dark:bg-emerald-600 dark:hover:bg-emerald-700">
<span class="relative z-10 transition-transform duration-300 ease-in-out group-hover:-translate-x-full opacity-100 group-hover:opacity-0 whitespace-nowrap">
Add to Cart
</span>
<span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
transition-transform duration-300 ease-in-out
text-purple-200 dark:text-purple-300
bg-purple-600 dark:bg-purple-700
rounded-full
scale-y-0 group-hover:scale-y-100
opacity-0 group-hover:opacity-100
group-hover:px-6 group-hover:py-3">
<svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Added!
</span>
<span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
transition-transform duration-300 ease-in-out delay-150
text-orange-200 dark:text-orange-300
bg-orange-500 dark:bg-orange-600
rounded-full
scale-y-0 group-hover:scale-y-100
opacity-0 group-hover:opacity-100
group-hover:px-6 group-hover:py-3
hidden">
<svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.703.707 1.703H17m0-10a2 2 0 110 4 2 2 0 010-4zm-7 4a2 2 0 110 4 2 2 0 010-4z" />
</svg>
Adding...
</span>
</button>
</div>Связанные компоненты
Добавить в корзину компонент кнопки
Сложный, скевоморфный компонент кнопки «В корзину», разработанный для игровых интерфейсов, отличающийся аналогичной цветовой гаммой и полной отзывчивостью с поддержкой темного режима.
Добавить в корзину Компонент кнопки 46
Ретро/винтажный компонент кнопки «Добавить в корзину», разработанный с использованием Tailwind CSS, отличается адаптивным дизайном и поддержкой темных тем.
Добавить в корзину компонент кнопки
Вдохновленный природой компонент кнопки «Добавить в корзину», разработанный для платформы форума/сообщества, отличается плавным, органичным стилем. Он отзывчив и поддерживает темный режим.