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 du bouton
Bouton de retour en haut avec design neumorphique, palette de couleurs monochromatique et prise en charge du mode sombre. Utilise Tailwind CSS.
Retour en haut de la page Composant du bouton
Un composant de bouton Retour en haut de style brutaliste utilisant Tailwind CSS. Ce composant a un design audacieux et contrasté et prend en charge les effets réactifs et le thème sombre.
Retour en haut du bouton
Un bouton Material Design Back to Top qui apparaît lorsque l’utilisateur fait défiler la page. Il comprend la prise en charge du mode sombre et un défilement fluide.