Кнопка «Добавить в корзину»
Скевоморфная кнопка «Добавить в корзину» с адаптивными эффектами и поддержкой темной темы.
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 для стилизации.
Кнопка «Добавить в корзину»
Добавьте в корзину компонент кнопки с минималистичным/плоским дизайном, цветовой схемой в оттенках серого, сложным уровнем сложности, для целей панели управления, с адаптивным дизайном и поддержкой темной темы.