Retour en haut du bouton
Composant de bouton avec une conception 3D, une palette de couleurs vives et des éléments interactifs complexes pour les interfaces de médias sociaux, à l’aide de Tailwind CSS. Il comprend un design réactif et une prise en charge du thème sombre.
HTML Code
<div class="fixed bottom-5 right-5 z-50">
<button
class="back-to-top-btn bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-white p-4 rounded-full shadow-lg transform transition-transform duration-300 hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800"
aria-label="Back to top"
>
<svg
class="w-6 h-6"
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="M5 10l7-7m0 0l7 7m-7-7v18"
></path>
</svg>
</button>
</div>
<style>
.back-to-top-btn {
/* Adding basic 3D effect with box-shadow */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2),
0 6px 6px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease-in-out;
}
.back-to-top-btn:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.22);
}
.back-to-top-btn:active {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
}
</style>Composants associés
Retour en haut de la page Composant du bouton
Un bouton « Retour en haut » réactif et visuellement attrayant avec une palette de couleurs triadiques, un dégradé et des transitions fluides, adapté à un site de portfolio, y compris la prise en charge du mode sombre.
Retour en haut du bouton
Un composant de bouton « Retour en haut » minimal et réactif avec prise en charge du mode sombre. Il apparaît après avoir fait défiler vers le bas et utilise un défilement fluide pour ramener l’utilisateur en haut de la page lorsqu’il clique dessus. Aucun JavaScript n’est utilisé pour le défilement, seulement du CSS.
Retour en haut de la page Composant du bouton
Un simple bouton Retour en haut conçu dans un style brutaliste à l’aide de Tailwind CSS, adapté à un site web de portfolio. Il dispose d’une palette de couleurs en niveaux de gris et d’une prise en charge du thème sombre.