Components Social Share Buttons Social Share Buttons Component

Social Share Buttons Component

A set of vibrant, 3D-inspired social share buttons suitable for food and restaurant websites, with full responsiveness and dark mode support.

Preview

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">
      &copy; 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>

Related Components

Social Share Buttons Component 51

A responsive social share buttons component designed with skeuomorphic design principles, featuring buttons that mimic real-world objects and support for dark theme. The component is styled using Tailwind CSS and includes placeholder images from picsum.photos and avatars from randomuser.me.

Open

Social Share Buttons Component

Social Share Buttons Component for E-commerce in Dark Mode using Tailwind CSS. Simple, responsive, and grayscale.

Open

Social Share Buttons Component

A responsive social share buttons component styled with retro/vintage aesthetics from the 80s/90s, featuring dark theme support using Tailwind CSS and placeholder images.

Open