Botón Añadir a la cesta
Un botón Skeuomórfico Agregar al carrito con efectos responsivos y soporte para temas oscuros.
Código 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>
Componentes relacionados
Botón Añadir a la cesta
Un componente de botón Skeuomórfico 'Agregar al carrito' diseñado con Tailwind CSS, con efectos responsivos y soporte para temas oscuros.
Botón Añadir a la cesta
Botón "Agregar al carrito" receptivo con diseño esqueuomórfico, combinación de colores monocromática y soporte para temas oscuros.
Añadir al carrito Componente de botón
Un componente de botón 'Agregar al carrito' de estilo 3D diseñado para interfaces de redes sociales. Cuenta con una interfaz rica con profundidad, elementos de diseño atractivos y es responsivo con soporte para temas oscuros.