Composant Boutons
Composant de boutons de neumorphisme avec schéma de couleurs monochromatiques à des fins de portefeuille, réactif avec prise en charge du thème sombre.
HTML Code
<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>Composants associés
Composant Boutons de conception matérielle
Composant de boutons de conception matérielle dans les tons de terre pour les médias sociaux
Composant Boutons
Un composant de boutons au design minimaliste / plat avec une palette de couleurs en niveaux de gris. Il convient aux sites Web d’entreprise et a une complexité modérée avec certaines fonctionnalités interactives. Il est réactif et prend en charge le thème sombre en utilisant Tailwind CSS.
Composant Boutons
Un composant de boutons minimaliste conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.