ArtDecoECommerceButtons
Un complejo conjunto de botones de comercio electrónico inspirados en el Art Deco con patrones geométricos y lujosos tonos Ocean/Blue, optimizados para la capacidad de respuesta y el modo oscuro.
Código HTML
<div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-blue-50 to-blue-200 dark:from-gray-900 dark:to-blue-950 min-h-screen flex items-center justify-center font-serif">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-2xl rounded-lg overflow-hidden border-4 border-blue-400 dark:border-blue-700 transform transition-all duration-500 hover:scale-[1.01]">
<div class="p-6 sm:p-8 lg:p-12 bg-blue-600 dark:bg-blue-900 text-white flex justify-between items-center relative overflow-hidden">
<div class="absolute inset-0 pattern-geometric opacity-20 dark:opacity-10 pointer-events-none"></div>
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-wide drop-shadow-lg z-10">Oceanic Selections</h2>
<div class="flex items-center space-x-3 z-10">
<span class="text-lg font-semibold">Your Cart</span>
<svg class="w-8 h-8 sm:w-10 sm:h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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.705.42 2.302l.644.644m-.644-.644L11.75 21M7 13H5.4M11.75 21h3.5M11.75 21L9.25 10.25l-2.293 2.293c-.63-.63-.182 1.705.42 2.302l.644.644" />
</svg>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8 md:p-10">
<!-- Primary Button -->
<button class="w-full py-4 px-6 bg-gradient-to-br from-blue-500 to-blue-700 dark:from-blue-700 dark:to-blue-900 text-white text-lg font-bold uppercase rounded-lg shadow-xl tracking-wider
transform transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-2xl hover:brightness-110
focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600
flex items-center justify-center space-x-2 relative overflow-hidden
border-b-4 border-blue-800 dark:border-blue-950 button-animation">
<span class="z-10">Add to Cart</span>
<svg class="w-6 h-6 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
<!-- Secondary Button -->
<button class="w-full py-4 px-6 bg-gradient-to-br from-blue-300 to-blue-500 dark:from-blue-500 dark:to-blue-700 text-white text-lg font-semibold uppercase rounded-lg shadow-md tracking-wide
transform transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg hover:brightness-110
focus:outline-none focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-500
flex items-center justify-center space-x-2 relative overflow-hidden
border-b-4 border-blue-600 dark:border-blue-800 button-animation">
<span class="z-10">View Details</span>
<svg class="w-6 h-6 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
<!-- Ghost Button -->
<button class="w-full py-4 px-6 bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 text-lg font-semibold uppercase rounded-lg shadow-lg tracking-wide
border-2 border-blue-600 dark:border-blue-700
transform transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-xl hover:bg-blue-50 dark:hover:bg-blue-900
focus:outline-none focus:ring-4 focus:ring-blue-100 dark:focus:ring-blue-800
flex items-center justify-center space-x-2 relative overflow-hidden
border-b-4 border-blue-700 dark:border-blue-800 button-animation">
<span class="z-10">Wishlist</span>
<svg class="w-6 h-6 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.73l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.07l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
</button>
<!-- Icon Button with text -->
<button class="w-full py-4 px-6 bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 text-white text-lg font-medium rounded-lg shadow-md tracking-wide
transform transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-xl hover:brightness-110
focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700
flex items-center justify-center space-x-2 relative overflow-hidden
border-b-4 border-blue-700 dark:border-blue-900 button-animation">
<svg class="w-6 h-6 z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H3a2 2 0 00-2 2v6a2 2 0 002 2h14a2 2 0 002-2v-6a2 2 0 00-2-2h-3V6a4 4 0 00-4-4zm2 6V6a2 2 0 10-4 0v2h4zm-4 4a1 1 0 100 2h4a1 1 0 100-2H8z" clip-rule="evenodd" />
</svg>
<span class="z-10">Buy Now</span>
</button>
<!-- Outline Button -->
<button class="w-full py-4 px-6 bg-transparent text-blue-600 dark:text-blue-300 text-lg font-semibold uppercase rounded-lg shadow-inner
border-2 border-blue-600 dark:border-blue-500
transform transition-all duration-300 ease-in-out
hover:bg-blue-100 dark:hover:bg-blue-900 hover:text-blue-800 dark:hover:text-blue-100 hover:shadow-md
focus:outline-none focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-700
flex items-center justify-center space-x-2 relative overflow-hidden
border-b-4 border-blue-700 dark:border-blue-600 button-animation">
<span class="z-10">Compare Items</span>
<svg class="w-6 h-6 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
</svg>
</button>
<!-- Disabled Button -->
<button class="w-full py-4 px-6 bg-gray-300 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-lg font-medium uppercase rounded-lg shadow-inner cursor-not-allowed
relative overflow-hidden
border-b-4 border-gray-400 dark:border-gray-800 button-animation opacity-70">
<span class="z-10">Out of Stock</span>
<svg class="w-6 h-6 z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-8-8a8 8 0 0115.347-3.929L3.929 15.347A8 8 0 012 10z" clip-rule="evenodd" />
</svg>
</button>
<!-- Small Button -->
<button class="w-full py-3 px-5 bg-gradient-to-br from-sky-400 to-sky-600 dark:from-sky-600 dark:to-sky-800 text-white text-base font-semibold rounded-md shadow-md
transform transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg hover:brightness-110
focus:outline-none focus:ring-4 focus:ring-sky-200 dark:focus:ring-sky-700
flex items-center justify-center space-x-2 relative overflow-hidden
border-b-4 border-sky-700 dark:border-sky-900 button-animation">
<svg class="w-5 h-5 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span class="z-10">Quick View</span>
</button>
<!-- Large Button -->
<button class="w-full py-5 px-8 bg-gradient-to-br from-teal-500 to-cyan-700 dark:from-teal-700 dark:to-cyan-900 text-white text-xl font-bold uppercase rounded-lg shadow-2xl tracking-wider
transform transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-3xl hover:brightness-110
focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-600
flex items-center justify-center space-x-3 relative overflow-hidden
border-b-4 border-teal-800 dark:border-teal-950 button-animation">
<span class="z-10">Proceed to Checkout</span>
<svg class="w-7 h-7 z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</button>
</div>
<div class="p-6 sm:p-8 md:p-10 bg-blue-700 dark:bg-blue-950 text-white flex flex-col sm:flex-row justify-between items-center relative overflow-hidden">
<div class="absolute inset-0 pattern-geometric-reverse opacity-20 dark:opacity-10 pointer-events-none"></div>
<p class="text-center sm:text-left mb-4 sm:mb-0 text-sm sm:text-base z-10">© 2023 Oceanic Arts. All rights reserved.</p>
<div class="flex space-x-4 z-10">
<a href="#" class="text-white hover:text-blue-200 dark:hover:text-blue-400 transition duration-300">Privacy Policy</a>
<a href="#" class="text-white hover:text-blue-200 dark:hover:text-blue-400 transition duration-300">Terms of Service</a>
</div>
</div>
</div>
</div>
<style>
/* Art Deco Geometric Pattern */
.pattern-geometric {
background-image: radial-gradient(circle at 100% 150%, #4a90e2, #4a90e2 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #2a5298 37%, #2a5298 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, #4a90e2, #4a90e2 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #2a5298 37%, #2a5298 40%, transparent 40%, transparent), radial-gradient(circle at 100% 50%, #4a90e2, #4a90e2 14%, transparent 14%, transparent 17%, #3467b7 17%, #3467b7 20%, transparent 20%, transparent 23%, #2a5298 23%, #2a5298 26%, transparent 26%, transparent), radial-gradient(circle at 0 50%, #4a90e2, #4a90e2 14%, transparent 14%, transparent 17%, #3467b7 17%, #3467b7 20%, transparent 20%, transparent 23%, #2a5298 23%, #2a5298 26%, transparent 26%, transparent), radial-gradient(circle at 100% 0, #4a90e2, #4a90e2 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #2a5298 37%, #2a5298 40%, transparent 40%, transparent), radial-gradient(circle at 0 0, #4a90e2, #4a90e2 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #2a5298 37%, #2a5298 40%, transparent 40%, transparent);
background-size: 80px 80px;
background-position: 0 0, 80px 0, 40px 40px, 120px 40px, 40px 0, 120px 0;
}
.pattern-geometric-reverse {
background-image: radial-gradient(circle at 100% 150%, #2a5298, #2a5298 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #4a90e2 37%, #4a90e2 40%, transparent 40%, transparent), radial-gradient(circle at 0 150%, #2a5298, #2a5298 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #4a90e2 37%, #4a90e2 40%, transparent 40%, transparent), radial-gradient(circle at 100% 50%, #2a5298, #2a5298 14%, transparent 14%, transparent 17%, #3467b7 17%, #3467b7 20%, transparent 20%, transparent 23%, #4a90e2 23%, #4a90e2 26%, transparent 26%, transparent), radial-gradient(circle at 0 50%, #2a5298, #2a5298 14%, transparent 14%, transparent 17%, #3467b7 17%, #3467b7 20%, transparent 20%, transparent 23%, #4a90e2 23%, #4a90e2 26%, transparent 26%, transparent), radial-gradient(circle at 100% 0, #2a5298, #2a5298 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #4a90e2 37%, #4a90e2 40%, transparent 40%, transparent), radial-gradient(circle at 0 0, #2a5298, #2a5298 28%, transparent 28%, transparent 31%, #3467b7 31%, #3467b7 34%, transparent 34%, transparent 37%, #4a90e2 37%, #4a90e2 40%, transparent 40%, transparent);
background-size: 80px 80px;
background-position: 0 0, 80px 0, 40px 40px, 120px 40px, 40px 0, 120px 0;
}
/* Button Hover/Click Animation - Subtle Art Deco Shine */
.button-animation::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
transform: rotate(45deg);
opacity: 0;
transition: all 0.5s ease-out;
z-index: 0;
}
.button-animation:hover::before {
opacity: 1;
top: -20%;
left: -20%;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
}
</style>Componentes relacionados
Componente Botones
Una colección de botones de diseño minimalista y plano para diversas acciones, utilizando una combinación de colores complementaria. Totalmente receptivo con soporte para modo oscuro.
Componente Botones de morfismo de vidrio
Un componente de botón de Glassmorphism simple y receptivo con colores pastel y soporte de modo oscuro usando Tailwind CSS.
Componente de botones inmobiliarios Art Deco
Un complejo componente de botón inspirado en el Art Deco para plataformas inmobiliarias, con patrones geométricos, lujoso estilo en escala de grises y múltiples elementos interactivos, con capacidad de respuesta total y compatibilidad con el modo oscuro.