Кнопка «Добавить в корзину»
Скевоморфная кнопка «Добавить в корзину» с адаптивными эффектами и поддержкой темной темы.
HTML-код
<button
class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-800 dark:text-gray-200 py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out"
>
<span class="flex items-center justify-center">
<svg
xmlns="http://www.w3.org/2000/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-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
></path>
</svg>
Add to Cart
</span>
</button>Связанные компоненты
Стеклянный морфизм кнопка Добавить в корзину
Добавить в корзину Кнопка со стилем Стекломорфизм, Монохроматическая цветовая гамма и Умеренная сложность. Отзывчивый с поддержкой темного режима.
Добавить в корзину компонент кнопки
Отзывчивая кнопка «Добавить в корзину», разработанная в темном режиме с использованием Tailwind CSS, с эффектами наведения и поддержкой темной темы.
Добавить в корзину компонент кнопки
Компонент кнопки «Добавить в корзину» в 3D-стиле, разработанный для интерфейсов социальных сетей. Он отличается богатым интерфейсом с глубиной, привлекательными элементами дизайна и адаптивностью с поддержкой темных тем.