Composant Boutons
Composant de bouton simple et réactif avec un design en niveaux de gris inspiré du papier/de l’impression, adapté aux plates-formes éducatives, prenant en charge les modes clair et sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-[200px] flex items-center justify-center font-sans">
<div class="max-w-xl w-full mx-auto p-6 sm:p-8 md:p-10 bg-white dark:bg-gray-800 shadow-md rounded-lg border border-gray-200 dark:border-gray-700 leading-relaxed">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-tight leading-tight">
Lesson Navigation
</h2>
<div class="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center">
<button type="button" class="transition-all duration-300 ease-in-out
flex-1 px-6 py-3 text-lg sm:text-xl font-semibold
bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100
border border-gray-300 dark:border-gray-600 rounded-md
shadow-sm hover:shadow-md
hover:bg-gray-50 dark:hover:bg-gray-600
focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800
active:bg-gray-100 dark:active:bg-gray-700/80
whitespace-nowrap text-center
relative group overflow-hidden">
<span class="absolute inset-0 border-white dark:border-gray-800 border-2 rounded-md transform scale-105 group-hover:scale-100 transition-transform duration-300 ease-in-out opacity-0 group-hover:opacity-100"></span>
Previous Lesson
</button>
<button type="button" class="transition-all duration-300 ease-in-out
flex-1 px-6 py-3 text-lg sm:text-xl font-semibold
bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-900
border border-gray-800 dark:border-gray-100 rounded-md
shadow-md hover:shadow-lg
hover:bg-gray-700 dark:hover:bg-gray-200
focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800
active:bg-gray-900 dark:active:bg-gray-300
whitespace-nowrap text-center
relative group overflow-hidden">
<span class="absolute inset-0 border-gray-800 dark:border-gray-100 border-2 rounded-md transform scale-105 group-hover:scale-100 transition-transform duration-300 ease-in-out opacity-0 group-hover:opacity-100"></span>
Next Lesson
</button>
</div>
<div class="mt-6 sm:mt-8 text-center">
<a href="#" class="inline-flex items-center text-base sm:text-lg font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors duration-200">
<svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
View All Lessons
</a>
</div>
</div>
</div>Composants associés
Composant Boutons
Un composant de boutons simple stylisé avec Material Design, utilisant une palette de couleurs monochromatiques et prenant en charge le mode sombre, adapté aux sites Web d’entreprise.
Skeuomorphic_Social_Buttons
Un ensemble complexe de boutons skeuomorphes avec une palette de couleurs vives, conçu pour les interfaces de médias sociaux. Comprend une mise en page réactive et la prise en charge du mode sombre, imitant les boutons du monde réel.
Composant Boutons
Un composant de boutons réactifs avec prise en charge du mode sombre pour les portfolios. Dispose d’un design plat minimaliste en niveaux de gris avec une complexité modérée.