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.
Código HTML
<div class="flex items-center justify-center p-4">
<div class="relative group">
<button class="relative z-10 block rounded-lg bg-blue-500 p-4 text-white text-lg font-semibold shadow-md transition-transform transform-gpu hover:scale-105 focus:outline-none dark:bg-blue-700">
<span>Add to Cart</span>
<span class="absolute top-0 left-0 w-full h-full bg-yellow-400 rounded-lg opacity-0 group-hover:opacity-40 transition-opacity duration-300"></span>
</button>
<div class="absolute -bottom-3 -right-3 w-12 h-12 rounded-full bg-red-500 shadow-lg flex items-center justify-center transform rotate-45 transition-transform duration-300 group-hover:scale-110">
<img src="https://picsum.photos/40" alt="Product Image" class="rounded-full">
</div>
<div class="absolute -bottom-16 -left-16 w-10 h-10 rounded-full bg-green-500 shadow-lg">
<img src="https://picsum.photos/30" alt="Decorative Element" class="rounded-full">
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-blue-500 { background-color: #3b82f6; }
.bg-blue-700 { background-color: #1d4ed8; }
.bg-yellow-400 { background-color: #f59e0b; }
.bg-red-500 { background-color: #ef4444; }
.bg-green-500 { background-color: #22c55e; }
.text-white { color: #ffffff; }
}
</style>Componentes relacionados
Añadir a la cesta Glassmorphism Botón Tonos Tierra
Un simple botón 'Agregar al carrito' diseñado con un estilo de cristal, utilizando tonos tierra, adecuado para una aplicación con temática meteorológica / climática. Es totalmente sensible y es compatible con el modo oscuro.
Botón Añadir a la cesta
Un componente de botón Agregar al carrito de diseño 3D con efectos responsivos y soporte de tema oscuro usando Tailwind CSS.
Luxury_Retro_Add_to_Cart_Button
Un elegante componente de botón 'Agregar al carrito' (o 'Consultar ahora' para bienes raíces) con una sensación de lujo/premium y una paleta de colores retro/vintage. Diseñado para plataformas inmobiliarias, con diseño responsivo y soporte para modo oscuro.