Composant Boutons de partage social
Un ensemble de boutons de partage social dynamiques, inspirés de la 3D, adaptés aux sites Web de restauration et d’alimentation, avec une réactivité totale et une prise en charge du mode sombre.
HTML Code
<div class="flex justify-center items-center h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
<div class="p-6 md:p-8 lg:p-10 bg-white dark:bg-gray-800 rounded-xl shadow-2xl transition-all duration-300 w-full max-w-md mx-auto transform perspective-1000px">
<h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center mb-6 md:mb-8 text-gray-900 dark:text-white leading-tight drop-shadow-md">
Share This Deliciousness!
</h2>
<p class="text-center text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8 md:mb-10">
Love our food? Spread the word and share with your friends!
</p>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
<!-- Facebook Button -->
<a href="#" class="share-button group bg-gradient-to-br from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 active:from-blue-800 active:to-blue-950 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-blue-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700/50 perspective-800px">
<div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
<div class="icon-wrapper relative z-10 p-3 bg-blue-500 rounded-full mb-3 shadow-md group-hover:bg-blue-400 transform group-hover:scale-110 transition-transform duration-300">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10Z" clip-rule="evenodd" />
</svg>
</div>
<span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">Facebook</span>
</a>
<!-- Twitter Button -->
<a href="#" class="share-button group bg-gradient-to-br from-sky-500 to-sky-700 hover:from-sky-600 hover:to-sky-800 active:from-sky-700 active:to-sky-900 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-sky-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-sky-300 dark:focus:ring-sky-700/50 perspective-800px">
<div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
<div class="icon-wrapper relative z-10 p-3 bg-sky-400 rounded-full mb-3 shadow-md group-hover:bg-sky-300 transform group-hover:scale-110 transition-transform duration-300">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21F6.681 12.23H17.84L9.363 2.25H2H8.82L0 12.23c2.173 2.923 5.066 5.029 8.324 5.029 6.786 0 11.964-6.462 11.964-11.493 0-.097-.007-.194-.015-.29M12.91 19.19H10.158L10.575 22h2.435Zm-4.965-7.468L2.25 2H4.912L12 11.168 19.088 2H22L15.932 10.963 22 22H19.088L11.83 12.832 4.912 22H2Z" />
</svg>
</div>
<span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">Twitter</span>
</a>
<!-- Instagram Button -->
<a href="#" class="share-button group bg-gradient-to-br from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 active:from-purple-800 active:to-pink-800 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-purple-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700/50 perspective-800px">
<div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
<div class="icon-wrapper relative z-10 p-3 bg-gradient-to-tr from-yellow-400 via-red-500 to-purple-600 rounded-full mb-3 shadow-md group-hover:from-yellow-300 group-hover:via-red-400 group-hover:to-purple-500 transform group-hover:scale-110 transition-transform duration-300">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 5.093c2.613 0 2.917.01 3.93.057 1.01.045 1.543.21 2.052.41 1.055.419 1.79.97 2.454 1.634.665.664 1.216 1.398 1.636 2.454.2.51.365 1.042.41 2.052.047 1.013.057 1.317.057 3.93s-.01 2.917-.057 3.93c-.045 1.01-.21 1.543-.41 2.052-.419 1.055-.97 1.79-1.634 2.454-.664.665-1.398 1.216-2.454 1.636-.51.2-.97.365-2.052.41-1.013.047-1.317.057-3.93.057s-2.917-.01-3.93-.057c-1.01-.045-1.543-.21-2.052-.41-1.055-.419-1.79-.97-2.454-1.634-.665-.664-1.216-1.398-1.636-2.454-.2-.51-.365-1.042-.41-2.052-.047-1.013-.057-1.317-.057-3.93s.01-2.917.057-3.93c.045-1.01.21-1.543.41-2.052.419-1.055.97-1.79 1.634-2.454.664-.665 1.398-1.216 2.454-1.636.51-.2.97-.365 2.052-.41 1.013-.047 1.317-.057 3.93-.057ZM12 3.55c-2.673 0-3.003.01-4.06.059-1.057.047-1.724.226-2.316.452-.693.266-1.265.632-1.83.997-.566.365-.96.793-1.34 1.232-.38.439-.706.892-1.026 1.32-.32.428-.588.79-.76 1.01-.17.22-.26.39-.28.47-.02.08-.03.11-.03.19-.01.07-.01.08-.02.13-.02.04-.02.04-.02.04-.01.01-.01.02-.02.03-.01.01-.01.02-.01.03-.01.01-.01.01-.01.02-.01.01-.01.02-.01.02-.01.01-.01.02-.01.02-.01.01-.01.01-.01.02-.01.01-.01.02-.01.02-.01.01-.01.02-.01.02-.01.01-.01.01-.01.02-.01.01-.01.02-.01.02-.01.01-.01.01-.01.01-.01.01-.01.04-.01.02-.01.02-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.02-.01.02-.01.01-.01.01-.01.02-.01.01-.01.02-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01s-.01-.01-.01-.01c-.01-.02-.01-.02-.01-.02-.01-.01-.01-.01-.01-.02-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.04s0-.04-.01-.01c-.01-.02-.01-.02-.01-.02-.01-.01-.01-.01-.01-.02-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.02-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01v-.01c-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c0-.01 0-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-1.06-.047-1.057-.226-1.724-.452-2.316-.266-.693-.632-1.265-.997-1.83-.365-.566-.793-.96-1.232-1.34-.439-.38-.892-.706-1.32-1.026-.428-.32-.79-.588-1.01-.76-.22-.17-.39-.26-.47-.28-.08-.02-.11-.03-.19-.03-.07-.01-.08-.01-.13-.02ZM12 18.026a6.026 6.026 0 1 0 0-12.052 6.026 6.026 0 0 0 0 12.052ZM12 7.625a4.375 4.375 0 1 0 0 8.75 4.375 4.375 0 0 0 0-8.75Zm5.4-.5a1.25 1.25 0 1 0-.003-2.5 1.25 1.25 0 0 0 .003 2.5Z" clip-rule="evenodd" />
</svg>
</div>
<span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">Instagram</span>
</a>
<!-- WhatsApp Button -->
<a href="#" class="share-button group bg-gradient-to-br from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 active:from-green-700 active:to-green-900 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-green-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700/50 perspective-800px">
<div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
<div class="icon-wrapper relative z-10 p-3 bg-green-400 rounded-full mb-3 shadow-md group-hover:bg-green-300 transform group-hover:scale-110 transition-transform duration-300">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.001 2.001c-5.522 0-10 4.478-10 10 0 1.942.547 3.754 1.488 5.31L2 22l4.693-1.256c1.47 1.05 3.23 1.637 5.308 1.637C17.523 22 22 17.522 22 12.001c0-5.522-4.477-10-9.999-10.001Zm4.79 14.88c-.14-.23-1.04-.6-1.5-.83-1.03-.54-1.25-.62-1.77-.32-.52.3-1.02.94-1.24 1.05-.22.11-.44.12-.82.02-.38-.1-1.603-.59-3.047-1.84c-1.127-.96-1.895-2.12-2.115-2.5-.22-.38-.02-.59.1-.69.11-.1.24-.17.37-.28.13-.1.17-.18.23-.3.06-.11.03-.23-.01-.32-.04-.09-.37-.76-.51-.9-.15-.14-.12-.3-.08-.38.04-.08.13-.2.2-.28.08-.08.17-.18.24-.26.07-.08.13-.15.2-.23.07-.08.14-.15.2-.22.06-.07.13-.14.19-.2.06-.06.12-.13.19-.19.07-.06.13-.12.2-.18.07-.06.13-.12.2-.17.06-.05.12-.1.18-.16.06-.06.12-.11.18-.16.06-.05.12-.1.18-.15.06-.04.12-.09.18-.13.06-.04.12-.08.18-.12.06-.04.12-.07.18-.11.06-.03.12-.06.18-.08.06-.02.12-.04.18-.06.06-.02.12-.03.18-.04.06-.01.12-.02.18-.03.06-.01.12-.01.18-.01.06 0 .12 0 .18.01.06.01.12.01.18.02.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.01.18.02.06.01.12.01.18.01.06.01.12 0 .18 0 .06 0 .12-.01.18-.01.06-.01.12-.01.18-.02.06-.01.12-.02.18-.03.06-.01.12-.02.18-.03.06-.01.12-.02.18-.03.06-.01.12-.02.18-.03.06-.01.12-.02.18-.03.04-.01.08-.01.12-.02.04-.01.08-.01.12-.01.04 0 .08-.01.12-.01.04-.01.08-.01.12-.01.04 0 .08 0 .12 0 .04 0 .08 0 .12 0 .04 0 .08 0 .12 0 .04 0 .08 0 .12 0 .04 0 .08-.01.12-.01.04-.01.08-.01.12-.01.04-.01.08-.01.12-.01.04 0 .08-.01.12-.01l-.01.01h.01c-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01-.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01c-.01 0-.01 0-.01.01-.01 0-.01 0-.01.01-.01 0-.01 0-.01.01-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01c-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01C15.22 17.06 15.7 16.96 16.79 16.48c.17-.07.36-.14.53-.2.17-.06.35-.12.52-.18.16-.06.33-.11.5-.16.16-.05.33-.09.49-.13.16-.04.33-.07.49-.09.16-.03.33-.05.49-.06.16-.01.33-.02.49-.01.16 0 .33.01.49.02.16.01.32.02.48.04.16.02.32.03.48.05.16.03.32.04.48.07.16.02.32.05.48.07.16.03.32.05.48.08.16.03.32.06.48.08.16.02.32.05.48.07.16.02.32.05.48.07.15.02.31.05.47.07.16.02.31.05.47.07.16.02.31.04.47.07.16.02.31.04.47.07.15.02.31.04.47.07.16.02.31.04.47.07.15.02.31.04.47.07.16.02.31.04.47.07.15.02.31.04.46.06.16.02.31.04.47.06.15.02.31.03.46.06.15.02.31.03.46.05.15.02.31.03.46.05.16.02.31.03.46.05.15.02.3.03.46.05.15.02.3.03.45.05.15.02.3.03.45.05.15.02.3.03.45.04.15.01.3.02.45.04.15.01.3.02.45.03.15.01.3.02.45.03C17.5 16.7 17.26 16.92 16.79 16.88Z" clip-rule="evenodd" />
</svg>
</div>
<span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">WhatsApp</span>
</a>
<!-- Pinterest Button -->
<a href="#" class="share-button group bg-gradient-to-br from-red-600 to-red-800 hover:from-red-700 hover:to-red-900 active:from-red-800 active:to-red-950 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-red-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-700/50 perspective-800px">
<div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
<div class="icon-wrapper relative z-10 p-3 bg-red-500 rounded-full mb-3 shadow-md group-hover:bg-red-400 transform group-hover:scale-110 transition-transform duration-300">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M7.297 2.15c-.138.005-.26.06-.41.11L.004 9.176l5.733 5.733A.997.997 0 0 0 6 15c0 3.866 3.134 7 7 7 3.865 0 7-3.134 7-7 0-3.865-3.135-7-7-7-1.408 0-2.732.42-3.867 1.157L5.807 8.16a.996.996 0 0 0-.256-1.57C5.08 6.51 4.7 6.453 4.14 6.74l1.32-.871A.996.996 0 0 0 6 5c.42 0 .814.162 1.111.458.297.297.458.69.458 1.11V11c0 .083-.004.166-.013.248-.009.082-.02.164-.035.247-.014.083-.03.165-.049.248-.01.048-.017.094-.027.142-.01.047-.019.094-.029.14-.009.047-.017.094-.025.14-.008.047-.015.093-.023.14-.008.047-.014.093-.019.14-.005.046-.008.09-.011.135-.003.045-.005.09-.005.135 0 .274.113.524.293.707.18.18.43.293.707.293.275 0 .525-.113.708-.293.18-.182.292-.432.292-.707 0-.008 0-.016-.002-.024-.002-.008-.003-.016-.005-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.003-.016-.005-.024-.002-.008-.003-.016-.005-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.003-.008-.005-.016-.007-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.003-.008-.005-.016-.007-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024L11 15c0 1.933-1.611 3.5-3.5 3.5-.828 0-1.58-.29-2.164-.766.195 1.096 1.15 1.942 2.364 1.942C12.38 19.675 16.5 15.556 16.5 10.435c0-4.048-2.617-7.46-6.19-8.497.042-.004.09-.008.138-.008Z" clip-rule="evenodd" />
</svg>
</div>
<span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">Pinterest</span>
</a>
<!-- Email Button -->
<a href="#" class="share-button group bg-gradient-to-br from-gray-500 to-gray-700 hover:from-gray-600 hover:to-gray-800 active:from-gray-700 active:to-gray-900 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-gray-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700/50 perspective-800px">
<div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
<div class="icon-wrapper relative z-10 p-3 bg-gray-400 rounded-full mb-3 shadow-md group-hover:bg-gray-300 transform group-hover:scale-110 transition-transform duration-300">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M1.5 8.67v8.586a1.5 1.5 0 0 0 .546 1.176l7.854 5.236a2 2 0 0 0 2.378 0l7.854-5.236A1.5 1.5 0 0 0 22.5 17.256V8.67a1.5 1.5 0 0 0-.8-1.39l-8.44-4.22a2 2 0 0 0-1.878 0l-8.44 4.22A1.5 1.5 0 0 0 1.5 8.67ZM12 6.55L20.45 10.98a.75.75 0 0 1 .45 1.17l-.7 1.05-.71 1.066-6.59-4.394a2 2 0 0 0-2.378 0L3.25 14.18V8.67ZM18.51 18.06l-6.59-4.394a2 2 0 0 0-2.378 0l-6.59 4.394a1.5 1.5 0 0 0 .546 1.176l7.854 5.236a2 2 0 0 0 2.378 0l7.854-5.236a1.5 1.5 0 0 0 .546-1.176V8.67ZM12 12.001l7.854 5.236a1.5 1.5 0 0 0 .546 1.176L12 23.364l-8.4-5.604a1.5 1.5 0 0 0 .546-1.176Z" />
</svg>
</div>
<span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">Email</span>
</a>
</div>
<p class="text-center text-sm md:text-md text-gray-400 dark:text-gray-500 mt-8 md:mt-12">
© 2023 Delicious Bites. All rights reserved.
</p>
</div>
</div>
<style>
/* Adding a subtle 3D effect for buttons */
.share-button {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
transform-style: preserve-3d;
perspective: 800px;
will-change: transform, box-shadow;
}
.share-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 60%;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
transform: translateZ(-50px) translateY(-50%) translateX(-50%) rotateX(-15deg);
filter: blur(25px);
opacity: 0;
transition: all 0.3s ease-out;
pointer-events: none;
}
.share-button:hover::before {
opacity: 1;
transform: translateZ(-30px) translateY(-50%) translateX(-50%) rotateX(-10deg);
}
.share-button:active {
transform: translateY(2px) scale(0.98);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0.5px 1.5px rgba(0, 0, 0, 0.06);
}
.share-button .icon-wrapper {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.3);
transition: all 0.3s ease-out;
}
.share-button:hover .icon-wrapper {
transform: scale(1.1);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.5);
}
/* Dark mode specific 3D adjustments for better contrast/visibility */
@media (prefers-color-scheme: dark) {
.dark .share-button {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}
.dark .share-button:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
}
.dark .share-button::before {
background: rgba(255, 255, 255, 0.05);
}
.dark .share-button:hover::before {
background: rgba(255, 255, 255, 0.1);
}
}
/* Keyframe for light pulse effect */
@keyframes pulse-light {
0% {
opacity: 0.1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 0.1;
}
}
.animate-pulse-light {
animation: pulse-light 2s infinite ease-in-out;
}
</style>Composants associés
Composant Boutons de partage social
Composant avec micro-interactions, schéma de couleurs en niveaux de gris, complexité modérée pour les interfaces de médias sociaux, conception réactive avec prise en charge du thème sombre.
Boutons de partage social
Composant de boutons de partage social avec design Glassmorphism, effets réactifs et prise en charge du thème sombre. Aucun JavaScript n’est utilisé.
Boutons de partage social
Boutons de partage social dotés d’un design réactif, d’une prise en charge du thème sombre et d’une esthétique 3D. Aucun JavaScript n’est requis.