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
Componente dei pulsanti di progettazione dei materiali
Componente dei pulsanti di Material Design nei toni della terra per i social media
Pulsanti di intrattenimento giocosi
Una serie di pulsanti giocosi e divertenti progettati per una piattaforma di intrattenimento o multimediale, con colori tenui/desaturati ed elementi arrotondati. Reattivo e include il supporto per la modalità oscura.
Componente Pulsanti
Pulsanti in stile Material Design con una combinazione di colori in scala di grigi per scopi di portfolio, con design reattivo con supporto per temi scuri.