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 conjunto de botones interactivos diseñados para un portafolio, con microinteracciones, una combinación de colores complementaria y una capacidad de respuesta completa con soporte para modo oscuro.
Botones de neón Art Deco
Componentes de botones simples y receptivos con un estilo geométrico Art Deco y una combinación de colores neón/eléctricos vibrantes, adecuados para aplicaciones de atención médica. Incluye soporte para modo oscuro.
Componente Botones
Un componente de botón minimalista para tableros, con soporte para diseño responsivo y tema oscuro.