Botones de redes sociales de neumorfismo
Un componente de botón simple al estilo Neumorphism para interfaces de redes sociales, con diseño receptivo y soporte de modo oscuro usando Tailwind CSS. El botón utiliza un esquema de color análogo y sombras sutiles para crear un aspecto suave y extruido.
Código HTML
<div class="flex items-center justify-center min-h-screen p-4 bg-gray-200 dark:bg-gray-800">
<button class="px-6 py-3 m-2 text-gray-700 transition-all duration-300 ease-linear bg-gray-200 rounded-full shadow-neumorphism-light hover:shadow-neumorphism-light-hover dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphism-dark dark:hover:shadow-neumorphism-dark-hover">
Like
</button>
<button class="px-6 py-3 m-2 text-gray-700 transition-all duration-300 ease-linear bg-gray-200 rounded-full shadow-neumorphism-light hover:shadow-neumorphism-light-hover dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphism-dark dark:hover:shadow-neumorphism-dark-hover">
Share
</button>
<button class="px-6 py-3 m-2 text-gray-700 transition-all duration-300 ease-linear bg-gray-200 rounded-full shadow-neumorphism-light hover:shadow-neumorphism-light-hover-analogous dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphism-dark dark:hover:shadow-neumorphism-dark-hover-analogous">
Comment
</button>
</div>
<style>
@media (prefers-color-scheme: light) {
.shadow-neumorphism-light {
box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
}
.hover\:shadow-neumorphism-light-hover:hover {
box-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffffff;
}
.hover\:shadow-neumorphism-light-hover-analogous:hover {
box-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffeead;
}
}
@media (prefers-color-scheme: dark) {
.shadow-neumorphism-dark {
box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #363636;
}
.hover\:shadow-neumorphism-dark-hover:hover {
box-shadow: 2px 2px 5px #4a4a4a, -2px -2px 5px #363636;
}
.hover\:shadow-neumorphism-dark-hover-analogous:hover {
box-shadow: 2px 2px 5px #4a4a4a, -2px -2px 5px #808000;
}
}
</style>
Componentes relacionados
Componente Botones
Un componente de botones minimalista diseñado con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.
Componente de botones neumórficos
Un componente de botón con un estilo de diseño neumórfico con efectos responsivos y compatibilidad con temas oscuros mediante 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.