Social Share Buttons

Social Share Buttons Component

A retro/vintage social share buttons component with a monochromatic color scheme. It is a complex, responsive design with dark theme support, suitable for a portfolio. Uses Tailwind CSS with no JavaScript.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-sm w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Share My Work</h2>
    <div class="grid grid-cols-2 gap-4">
      <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c.96.2 1.956.333 3.013.333 1.056 0 2.052-.133 3.013-.333L10.3 12.3l-2.01 7.951zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c.002-.001.004-.002.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>Twitter</span>
      </a>
      <a href="#" class="bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm5 10c0 .99-.607 1.83-1.472 2.15l-.008.003c.594-.962.88-2.03.88-3.15 0-2.316-1.528-4.28-3.92-4.86.04-.15.06-.3.06-.47 0-.74-.23-1.43-.63-2.02l-.004-.007C15.176 4.968 16.945 8.163 17 12zm-3.5 0c0 1.93-1.57 3.5-3.5 3.5S8.5 13.93 8.5 12 10.07 8.5 12 8.5s3.5 1.57 3.5 3.5zm-5.748-1.58C9.53 9.71 10.74 9 12 9s2.47.71 3.248 1.42c-.77-.42-1.68-.67-2.67-.67-.99 0-1.9.25-2.67.67zM12 20.1C8.28 20.1 5 16.82 5 12c0-1.76.67-3.41 1.79-4.66l-.007-.008C5.176 8.163 3 11.233 3 12c0 2.21 1.79 4 4 4v-1h-.5a1.5 1.5 0 00-1.5 1.5v2c0 .83.67 1.5 1.5 1.5h11c.83 0 1.5-.67 1.5-1.5v-2a1.5 1.5 0 00-1.5-1.5H17v-1c2.21 0 4-1.79 4-4s-1.79-4-4-4v1h.5a1.5 1.5 0 001.5-1.5v-2c0-.83-.67-1.5-1.5-1.5h-11c-.83 0-1.5.67-1.5 1.5v2zm4.708 1.42A5.726 5.726 0 0017.9 12c0-1.02-.19-2.007-.545-2.923l-1.107.306c-.002.001-.004.002-.006.003L16.708 11.43z"/></svg>
        <span>Facebook</span>
      </a>
      <a href="#" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.5 13.5h-9V8.5h9v7zm-2-5H9.5v-2h5v2zm-2.5 5H9.5v-2h2.5v2zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>YouTube</span>
      </a>
      <a href="#" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>Instagram</span>
      </a>
      <a href="#" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>GitHub</span>
      </a>
      <a href="#" class="bg-blue-400 hover:bg-blue-500 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>LinkedIn</span>
      </a>
    </div>
  </div>
</div>

Social Share Buttons Component

Social Share Buttons Component with microinteractions, grayscale color scheme, moderate complexity for social media interfaces, responsive design with dark theme support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="flex space-x-4 p-4 rounded-lg shadow-lg bg-white dark:bg-gray-800">

    <!-- Facebook Button -->
    <a href="#" class="group relative flex items-center justify-center p-3 rounded-full bg-gray-200 dark:bg-gray-700 
                       hover:bg-blue-600 dark:hover:bg-blue-700 transition-all duration-300 ease-in-out 
                       transform hover:-translate-y-1 hover:scale-110 overflow-hidden">
      <svg class="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M14 13.5H16.5L17.5 9.5H14V6.5C14 5.48473 14.156 5.24436 14.6293 4.96695C15.1027 4.68953 15.6568 4.5 16.0357 4.5H17.5V0.849C17.2023 0.816436 16.2943 0.75 15.1633 0.75C12.8711 0.75 11.2335 2.1265 11.2335 4.88457V9.5H8.5V13.5H11.2335V23.25H14V13.5Z"/>
      </svg>
      <span class="absolute top-0 left-0 w-full h-full bg-blue-500 dark:bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out scale-0 group-hover:scale-100 rounded-full"></span>
    </a>

    <!-- Twitter Button -->
    <a href="#" class="group relative flex items-center justify-center p-3 rounded-full bg-gray-200 dark:bg-gray-700 
                       hover:bg-blue-400 dark:hover:bg-blue-500 transition-all duration-300 ease-in-out 
                       transform hover:-translate-y-1 hover:scale-110 overflow-hidden">
      <svg class="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M22.46 6C21.64 6.36 20.76 6.61 19.86 6.74C20.79 6.18 21.46 5.34 21.82 4.3C20.93 4.84 19.98 5.22 18.96 5.43C18.13 4.56 16.92 4 15.58 4C12.87 4 10.63 6.22 10.63 8.94C10.63 9.38 10.68 9.8 10.79 10.2C7.38 8.44 5.02 5.56 3.4 2.5C2.97 3.24 2.76 4.08 2.76 4.95C2.76 6.7 3.69 8.27 5.16 9.19C4.31 9.17 3.49 8.93 2.76 8.5V8.5C2.76 10.87 4.41 12.87 6.64 13.33C6.22 13.44 5.79 13.49 5.35 13.49C5.04 13.49 4.74 13.46 4.44 13.39C5.07 15.34 6.89 16.82 9.08 16.86C7.3 18.23 5.08 19.06 2.76 19.06C2.37 19.06 1.99 19.04 1.62 18.99C3.84 20.44 6.47 21.25 9.28 21.25C15.55 21.25 19.02 15.93 19.02 11.2V10.7C19.68 10.15 20.26 9.5 20.74 8.78C20.1 9.15 19.4 9.4 18.66 9.5Z"/>
      </svg>
      <span class="absolute top-0 left-0 w-full h-full bg-blue-400 dark:bg-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out scale-0 group-hover:scale-100 rounded-full"></span>
    </a>

    <!-- LinkedIn Button -->
    <a href="#" class="group relative flex items-center justify-center p-3 rounded-full bg-gray-200 dark:bg-gray-700 
                       hover:bg-blue-800 dark:hover:bg-blue-900 transition-all duration-300 ease-in-out 
                       transform hover:-translate-y-1 hover:scale-110 overflow-hidden">
      <svg class="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M20.447 20.452H15.962V13.816C15.962 12.181 15.207 11.018 13.731 11.018C12.585 11.018 11.859 11.83 11.531 12.639C11.406 12.946 11.378 13.342 11.378 13.738V20.452H6.941V6.993H11.378V8.922C11.968 7.822 13.076 6.782 15.226 6.782C18.175 6.782 20.447 8.653 20.447 13.382V20.452ZM2.542 4.792C1.144 4.792 0 3.714 0 2.436C0 1.159 1.144 0.081 2.542 0.081C3.898 0.081 5.042 1.159 5.042 2.436C5.042 3.714 3.898 4.792 2.542 4.792ZM4.721 20.452H0.285V6.993H4.721V20.452Z"/>
      </svg>
      <span class="absolute top-0 left-0 w-full h-full bg-blue-700 dark:bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out scale-0 group-hover:scale-100 rounded-full"></span>
    </a>

    <!-- Instagram Button -->
    <a href="#" class="group relative flex items-center justify-center p-3 rounded-full bg-gray-200 dark:bg-gray-700 
                       hover:bg-pink-600 dark:hover:bg-pink-700 transition-all duration-300 ease-in-out 
                       transform hover:-translate-y-1 hover:scale-110 overflow-hidden">
      <svg class="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 2C8.686 2 8.257 2.012 6.974 2.07C5.69 2.128 4.734 2.378 3.89 2.709C2.96 3.067 2.185 3.655 1.54 4.298C0.898 4.94 0.312 5.714 0.003 6.645C-0.08 7.042 -0.009 7.439 0 7.836V16.164C0.009 16.561 0.08 16.958 0.003 17.355C0.312 18.286 0.898 19.06 1.54 19.702C2.185 20.345 2.96 20.933 3.89 21.291C4.734 21.622 5.69 21.872 6.974 21.93C8.257 21.988 8.686 22 12 22C15.314 22 15.743 21.988 17.026 21.93C18.31 21.872 19.266 21.622 20.11 21.291C21.04 20.933 21.815 20.345 22.46 19.702C23.102 19.06 23.688 18.286 23.997 17.355C24.08 16.958 24.009 16.561 24 16.164V7.836C24.009 7.439 24.08 7.042 23.997 6.645C23.688 5.714 23.102 4.94 22.46 4.298C21.815 3.655 21.04 3.067 20.11 2.709C19.266 2.378 18.31 2.128 17.026 2.07C15.743 2.012 15.314 2 12 2ZM12 4C15.289 4 15.69 4.013 16.93 4.068C18.152 4.123 18.784 4.303 19.262 4.475C19.742 4.647 20.082 4.887 20.407 5.212C20.732 5.537 20.972 5.877 21.144 6.357C21.316 6.835 21.496 7.468 21.551 8.69C21.606 9.932 21.619 10.332 21.619 12C21.619 13.668 21.606 14.068 21.551 15.308C21.496 16.53 21.316 17.162 21.144 17.64C20.972 18.118 20.732 18.458 20.407 18.783C20.082 19.108 19.742 19.348 19.262 19.52C18.784 19.692 18.152 19.872 16.93 19.927C15.69 19.982 15.289 19.995 12 19.995C8.711 19.995 8.31 19.982 7.07 19.927C5.848 19.872 5.216 19.692 4.738 19.52C4.258 19.348 3.918 19.108 3.593 18.783C3.268 18.458 3.028 18.118 2.856 17.64C2.684 17.162 2.504 16.53 2.449 15.308C2.394 14.068 2.381 13.668 2.381 12C2.381 10.332 2.394 9.932 2.449 8.69C2.504 7.468 2.684 6.835 2.856 6.357C3.028 5.877 3.268 5.537 3.593 5.212C3.918 4.887 4.258 4.647 4.738 4.475C5.216 4.303 5.848 4.123 7.07 4.068C8.31 4.013 8.711 4 12 4ZM12 8C9.791 8 8 9.791 8 12C8 14.209 9.791 16 12 16C14.209 16 16 14.209 16 12C16 9.791 14.209 8 12 8ZM12 14C10.897 14 10 13.103 10 12C10 10.897 10.897 10 12 10C13.103 10 14 10.897 14 12C14 13.103 13.103 14 12 14ZM18.529 6.27C18.125 6.27 17.79 5.935 17.79 5.531C17.79 5.127 18.125 4.792 18.529 4.792C18.933 4.792 19.268 5.127 19.268 5.531C19.268 5.935 18.933 6.27 18.529 6.27Z"/>
      </svg>
      <span class="absolute top-0 left-0 w-full h-full bg-pink-500 dark:bg-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out scale-0 group-hover:scale-100 rounded-full"></span>
    </a>

  </div>
</div>

Social Share Buttons Component

A minimalist social share buttons component designed for dashboards, featuring a vibrant color scheme and responsive design, with dark mode support.

Open Preview

                <div class="flex items-center justify-center space-x-4 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Share this Dashboard</h2>
  <div class="flex space-x-2">
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-red-500 text-white hover:bg-red-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=1" alt="Share on Facebook" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=2" alt="Share on Twitter" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-green-500 text-white hover:bg-green-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=3" alt="Share on LinkedIn" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-yellow-500 text-white hover:bg-yellow-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=4" alt="Share via Email" class="w-5 h-5" />
    </a>
  </div>
</div>

Social Share Buttons Component

A responsive social share buttons component designed in a glassmorphism style with a monochromatic color scheme for e-commerce sites. It features frosted glass-like translucent elements, includes multiple interactive buttons for sharing on social media, and has dark mode support using Tailwind CSS.

Open Preview

                <div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg space-x-4">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/200/200" alt="Product Image" class="w-24 h-24 rounded-lg mb-2">
        <h2 class="text-lg text-gray-800 dark:text-gray-200">Share this product</h2>
    </div>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 text-white hover:bg-blue-700 transition-all duration-300 shadow-lg dark:bg-blue-600 dark:hover:bg-blue-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" alt="Facebook" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-400 text-white hover:bg-blue-600 transition-all duration-300 shadow-lg dark:bg-blue-500 dark:hover:bg-blue-700">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/twitter.png" alt="Twitter" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-pink-500 text-white hover:bg-pink-700 transition-all duration-300 shadow-lg dark:bg-pink-600 dark:hover:bg-pink-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" alt="Instagram" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-red-500 text-white hover:bg-red-700 transition-all duration-300 shadow-lg dark:bg-red-600 dark:hover:bg-red-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/pinterest.png" alt="Pinterest" class="w-6 h-6">
        </a>
    </div>
</div>

Responsive social share buttons component with dark theme support, brutalist design, analogous color scheme, and complex interactions, built with Tailwind CSS for a portfolio website.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 p-8 min-h-screen flex items-center justify-center">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">

    <!-- Social Share Button 1 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-yellow-500 text-3xl">
          <i class="fab fa-twitter"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Twitter</h3>
          <p class="text-gray-600 dark:text-gray-400">Spread the word!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-yellow-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Tweet
      </button>
    </div>

    <!-- Social Share Button 2 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-orange-500 text-3xl">
          <i class="fab fa-facebook-f"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Facebook</h3>
          <p class="text-gray-600 dark:text-gray-400">Connect with friends!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-orange-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Share
      </button>
    </div>

    <!-- Social Share Button 3 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-red-500 text-3xl">
          <i class="fab fa-pinterest-p"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Pinterest</h3>
          <p class="text-gray-600 dark:text-gray-400">Inspire others!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-red-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Pin It
      </button>
    </div>

    <!-- Social Share Button 4 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-blue-500 text-3xl">
          <i class="fab fa-linkedin-in"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on LinkedIn</h3>
          <p class="text-gray-600 dark:text-gray-400">Grow your network!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-blue-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Connect
      </button>
    </div>

  </div>
</div>

Social Share Buttons Component

Responsive Social Share Buttons with Glassmorphism style and vibrant colors, designed for blogs and content consumption.

Open Preview

                <div class="flex flex-col items-center p-5 bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-40">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Share this Post</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center p-3 bg-red-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on Facebook">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="Facebook">
            <span class="text-white ml-2">Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center p-3 bg-blue-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on Twitter">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="Twitter">
            <span class="text-white ml-2">Twitter</span>
        </a>
        <a href="#" class="flex items-center justify-center p-3 bg-purple-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on LinkedIn">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="LinkedIn">
            <span class="text-white ml-2">LinkedIn</span>
        </a>
    </div>
</div>

Skeuomorphic Earth Tone Social Share Buttons

A set of social share buttons styled in a Skeuomorphic design using earth tones. Features include responsive layout and dark mode support with interactive press effects on hover, built purely with HTML and Tailwind CSS classes.

Open Preview

                <div class="flex justify-center p-6 bg-stone-100 dark:bg-stone-900 min-h-screen">
  <div class="flex space-x-4 md:space-x-6 flex-wrap justify-center w-full max-w-lg gap-y-4">

    <!-- Facebook Button -->
    <a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
                      bg-neutral-200 text-stone-700
                      shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
                      dark:bg-neutral-800 dark:text-stone-300
                      dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
                      transition transform duration-200 ease-in-out
                      hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
                      dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
        aria-label="Share on Facebook">
       <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.675 0H1.325C0.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.691v-3.621h3.129V8.41c0-3.11 1.893-4.82 4.66-4.82 1.314 0 2.417.097 2.745.141v3.208h-1.949c-1.534 0-1.841.724-1.841 1.793v2.358h3.56L19.524 14.71h-3.154V24h6.294c0.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg>
    </a>

    <!-- Twitter Button -->
    <a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
                      bg-neutral-200 text-stone-700
                      shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
                      dark:bg-neutral-800 dark:text-stone-300
                      dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
                      transition transform duration-200 ease-in-out
                      hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
                      dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
        aria-label="Share on Twitter">
      <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.716 11.492H16.35l-5.21-6.893L6.66 21.75H3.34l8.495-9.52-8.046-9.488h7.56zm-.493 1.374L5.207 21.02h3.75l9.138-12.874h-7.81z"/></svg>
    </a>

    <!-- Instagram Button -->
    <a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
                      bg-neutral-200 text-stone-700
                      shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
                      dark:bg-neutral-800 dark:text-stone-300
                      dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
                      transition transform duration-200 ease-in-out
                      hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
                      dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
        aria-label="Share on Instagram">
      <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C8.74 0 8.333.014 7.053.072 5.775.132 4.9.333 4.073.668c-.844.331-1.592.726-2.34 1.473S.998 3.228.668 4.073c-.333.836-.534 1.701-.592 2.98-.058 1.28-.072 1.69-.072 4.9s.014 3.62.072 4.9c.058 1.278.259 2.144.592 2.977.33.844.726 1.592 1.473 2.34s1.5.998 2.34 1.473c.835.331 1.7.534 2.978.592 1.28.058 1.689.072 4.9.072s3.62.014 4.9-.072c1.277-.058 2.144-.259 2.977-.592.844-.33 1.592-.726 2.34-1.473s.998-1.5 1.473-2.34c.331-.836.534-1.7.592-2.977.058-1.28.072-1.69.072-4.9s-.014-3.62-.072-4.9c-.058-1.278-.259-2.144-.592-2.977-.33-.844-.726-1.592-1.473-2.34S20.772.998 19.927.668c-.835-.333-1.7-.534-2.978-.592C16.38.014 15.97.001 12 0zm0 2.16c3.203 0 3.585.016 4.85.074 1.05.049 1.791.217 2.41.465.639.254 1.129.596 1.597 1.064s.81 1.007 1.063 1.645c.248.62.416 1.36.465 2.41.058 1.264.074 1.646.074 4.85s-.016 3.585-.074 4.85c-.049 1.05-.217 1.791-.465 2.41-.254.639-.596 1.129-1.064 1.597s-1.007.81-1.645 1.063c-.62.248-1.36.416-2.41.465-1.264.058-1.646.074-4.85.074s-3.585-.016-4.85-.074c-1.05-.049-1.791-.217-2.41-.465-.639-.254-1.129-.596-1.597-1.064s-.81-1.007-1.063-1.645c-.248-.62-.416-1.36-.465-2.41C2.16 15.585 2.14 15.203 2.14 12s.016-3.585.074-4.85c.049-1.05.217-1.791.465-2.41.254-.639.596-1.129 1.064-1.597S3.29 3.361 3.929 3.106c.62-.248 1.36-.416 2.41-.465C8.414 2.16 8.796 2.14 12 2.14zm0 3.615a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm0 2.16a2.34 2.34 0 1 1 0 4.68 2.34 2.34 0 0 1 0-4.68z"/></svg>
    </a>

    <!-- LinkedIn Button -->
    <a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
                      bg-neutral-200 text-stone-700
                      shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
                      dark:bg-neutral-800 dark:text-stone-300
                      dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
                      transition transform duration-200 ease-in-out
                      hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
                      dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
        aria-label="Share on LinkedIn">
      <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.04-.826-4.068c-.796-1.029-1.835-1.675-3.305-1.675c-2.137 0-3.205 1.578-3.205 4.125v5.187H6.88v-9.45h3.388v1.452h.046c.447-.863 1.607-1.77 3.29-1.77C17.357 8.116 18 9.769 18 12.15v8.302zM3.633 7.514c-1.002-.02-1.28.737-1.28 1.618c0 .88.282 1.617 1.28 1.637c.998.02 1.28-.737 1.28-1.617c0-.88-.282-1.618-1.28-1.638zm-.013-2.5c-1.328 0-2.158.891-2.158 2.035c0 1.143.83 2.035 2.148 2.035c1.328 0 2.157-.891 2.157-2.035c-.014-1.144-.83-2.035-2.147-2.035h.01zM6.88 20.452H3.633V11h3.25zm14.104 0h-3.554v-5.569c0-1.328-.027-3.04-.826-4.068c-.796-1.029-1.835-1.675-3.305-1.675c-2.137 0-3.205 1.578-3.205 4.125v5.187H6.88v-9.45h3.388v1.452h.046c.447-.863 1.607-1.77 3.29-1.77C17.357 8.116 18 9.769 18 12.15v8.302z"/></svg>
    </a>

  </div>
</div>

Social Share Buttons Component

Social Share Buttons Component for Dark Mode UI, uses Tailwind CSS, grayscale color scheme, simple complexity, for portfolio purpose, responsive design with dark theme support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-black">
  <div class="flex space-x-4 p-4 bg-gray-800 dark:bg-gray-900 rounded-lg">
    <a href="#" class="text-gray-400 hover:text-white dark:hover:text-gray-300">
      <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 2C6.475 2 2 6.475 2 12c0 4.215 2.582 7.775 6.32 9.34.46.085.59-.2.59-.44v-1.54c-2.53.55-3.06-.83-3.06-.83-.4-.99-.98-1.26-.98-1.26-.78-.53.06-.52.06-.52.86.06 1.32.88 1.32.88.76 1.3 1.99.92 2.48.7.08-.54.3-.92.55-1.13-1.9-.21-3.91-.95-3.91-4.21 0-.93.33-1.68.88-2.27-.09-.21-.38-1.07.08-2.22 0 0 .7-.22 2.2.83.66-.18 1.36-.27 2.07-.27.71 0 1.41.09 2.07.27 1.5-1.05 2.2-.83 2.2-.83.46 1.15.17 2.01.08 2.22.55.59.88 1.34.88 2.27 0 3.27-2.01 3.99-3.92 4.2.3.26.58.76.58 1.52v2.24c0 .24.13.52.59.44C19.42 19.775 22 16.215 22 12 22 6.475 17.525 2 12 2z"/>
      </svg>
    </a>

    <a href="#" class="text-gray-400 hover:text-white dark:hover:text-gray-300">
      <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M8.29 20.5c-1.7.37-3.34.33-4.76-.25C.9 19.24 1.97 16.26 3.56 15c.71-.54 1.46-1.03 2.26-1.46 1.05-.56 2.08-1.12 3.1-.68 1.02.44 1.47 1.56 1.47 2.64 0 .4-.02.8-.06 1.19.73-.13 1.46-.25 2.18-.38.8-.08 1.6.01 2.4.27 1.57.52 2.73 1.74 3.27 3.3.4-.13.79-.26 1.19-.39 1.-.32 2.1-.21 3 .08-.76.41-1.5.84-2.24 1.26.83 1.1 1.34 2.23 1.5 3.47.02.2.04.39.06.59-.79-.4-1.6-.79-2.4-1.19-1.2-.66-2.4-.98-3.6-.99h-.02c-.88.01-1.76.05-2.64.12-.62.05-1.2.13-1.77.25zM6.53 10.15c-2.24-.37-3.98-2.34-3.98-4.8 0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.46-1.74 4.43-3.98 4.8.01.66.08 1.33.19 1.99.39.26.8.47 1.2.68.6-.1 1.2-.2 1.81-.36-.41-1.32-1.13-2.44-2.09-3.3-.63-.57-1.31-1.06-2.02-1.48a5.65 5.65 0 00-.95-1.82 3.09 3.09 0 01-1.63-2.78c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1c0 .76-.27 1.46-.74 2.03-.43.52-.96.96-1.57 1.33 1.29 1.24 2.08 2.99 2.08 4.9 0 .51-.03 1.02-.1 1.53-1.68-.3-3.4-.4-5.12-.33-.72-1.76-.94-3.84-.51-5.79z"/>
      </svg>
    </a>

    <a href="#" class="text-gray-400 hover:text-white dark:hover:text-gray-300">
      <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path fill-rule="evenodd" d="M12 2c-5.523 0-10 4.477-10 10 0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.79c0-2.508 1.493-3.89 3.776-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.33v6.988C18.342 21.128 22 16.991 22 12c0-5.523-4.477-10-10-10z" clip-rule="evenodd" />
      </svg>
    </a>
  </div>
</div>

Social Share Buttons Component

Social Share Buttons Component with Brutalism design, Vibrant color scheme, and Complex complexity level for E-commerce, with responsive design and dark theme support using Tailwind CSS. No JavaScript.

Open Preview

                <div class="bg-yellow-400 p-6 min-h-screen flex items-center justify-center dark:bg-gray-900">
  <div class="flex flex-wrap space-x-4">
    <!-- Share Button 1 -->
    <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-red-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-red-500">
      Share on X
    </button>

    <!-- Share Button 2 -->
    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-blue-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-blue-500">
      Share on Facebook
    </button>

    <!-- Share Button 3 -->
    <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-green-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-green-500">
      Share on LinkedIn
    </button>

    <!-- Share Button 4 -->
    <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-purple-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-purple-500">
      Share on Pinterest
    </button>

    <!-- Share Button 5 -->
    <button class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-pink-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-pink-500">
      Copy Link
    </button>
  </div>
</div>

Skeuomorphic Social Share Buttons

Responsive Social Share Buttons Component with Skeuomorphic design, Monochromatic color scheme, and Complex interactions, with dark theme support. Designed for blogs and content sites.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="flex space-x-4">

        <!-- Facebook Button -->
        <a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
            <div class="flex items-center justify-center w-12 h-12 bg-blue-600 dark:bg-blue-800 text-white rounded-full shadow-lg">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path 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.299c-1.213 0-1.587.753-1.587 1.517V12h3.328l-.53 3.663h-2.798V22c4.781-.75 8.437-4.887 8.437-9.878z" />
                </svg>
            </div>
        </a>

        <!-- Twitter Button -->
        <a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
            <div class="flex items-center justify-center w-12 h-12 bg-blue-400 dark:bg-blue-600 text-white rounded-full shadow-lg">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178-.004-.357-.012-.534A8.358 8.358 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.103 4.103 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.273 4.134 4.134 0 001.27 5.477A4.073 4.073 0 014 10.20c0 .038 0 .077.01.116A11.703 11.703 0 0012.31 21.5a4.141 4.141 0 01-1.854-.054 4.002 4.002 0 01-1.495-.385 4.017 4.017 0 002.965-1.636c-.379-.09-.73-.28-1.014-.542-.283-.263-.51-.59-.656-.954a4.102 4.102 0 01-.166-1.095v-.049c.39.22.84.38 1.301.407a4.011 4.011 0 01-1.791-3.5z" />
                </svg>
            </div>
        </a>

        <!-- LinkedIn Button -->
        <a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
            <div class="flex items-center justify-center w-12 h-12 bg-blue-700 dark:bg-blue-900 text-white rounded-full shadow-lg">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.583-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
                </svg>
            </div>
        </a>

         <!-- Pinterest Button -->
         <a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
            <div class="flex items-center justify-center w-12 h-12 bg-red-600 dark:bg-red-800 text-white rounded-full shadow-lg">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 0C6.477 0 2 4.477 2 10a8.015 8.015 0 002.161 5.411c-.066.241-.19.763-.217.862-.046.168-.113.471-.127.524-.014.052-.024.08-.024.08l-.001.003a1.04 1.04 0 01-.188.505 1 1 0 00.951 1.349l2.436-.002c.321 0 .627-.148.824-.404.196-.256.392-.786.476-1.042.284-.86.776-2.3.776-2.3.208.36.519.687.89.927A7.947 7.947 0 0012 18a8 8 0 100-16zM8.5 13C7.67 13 7 12.33 7 11.5S7.67 10 8.5 10 10 10.67 10 11.5 9.33 13 8.5 13zm7-2c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8 17 8.67 17 9.5 16.33 11 15.5 11z"/>
                </svg>
            </div>
        </a>

    </div>
</div>

Categories

Social Share Buttons