Componente Pulsanti
Componente pulsanti di neumorfismo con combinazione di colori monocromatica per scopi di portfolio, reattivo con supporto per temi scuri.
Codice HTML
<section class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
<div class="flex space-x-4">
<button class="px-6 py-3 text-gray-700 duration-300 ease-in-out bg-gray-300 rounded-full shadow-neumorphic dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphic-dark hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">Primary Button</button>
<button class="px-6 py-3 text-gray-700 duration-300 ease-in-out bg-gray-300 rounded-full shadow-neumorphic dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphic-dark hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">Secondary Button</button>
</div>
<style>
.shadow-neumorphic {
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #4b5563, -7px -7px 15px #374151;
}
.hover\:shadow-neumorphic-hover:hover {
box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}
.dark .hover\:shadow-neumorphic-dark-hover:hover {
box-shadow: inset 5px 5px 10px #4b5563, inset -5px -5px 10px #374151;
}
</style>
</section>Componenti correlati
Neumorfismo Pulsanti dei social media
Un semplice componente pulsante in stile neumorfismo per le interfacce dei social media, caratterizzato da un design reattivo e dal supporto della modalità oscura utilizzando Tailwind CSS. Il pulsante utilizza una combinazione di colori analoga e ombre sottili per creare un aspetto morbido ed estruso.
Componente Pulsanti
Un componente di pulsanti in stile 3D adatto a un portfolio con una combinazione di colori analoga e supporto per la modalità scura.
Componente Pulsanti
Un componente Buttons progettato con elementi 3D e colori vivaci per le interfacce dei social media, che supporta il tema scuro e il design reattivo.