ソーシャルシェアボタン

ソーシャル共有ボタンコンポーネント

レトロ/ビンテージデザイン、アースカラーの配色、シンプルな複雑さのレベル、ダークテーマをサポートするレスポンシブデザインのソーシャルシェアボタンコンポーネント、Tailwind CSSを使用したソーシャルメディア用。

                <div class="flex flex-wrap justify-center space-x-4 p-4 bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md">

  <!-- Facebook Button -->
  <a href="#" class="flex items-center space-x-2 bg-stone-300 dark:bg-stone-700 text-stone-800 dark:text-stone-200 py-2 px-4 rounded-md hover:bg-stone-400 dark:hover:bg-stone-600 transition duration-300 ease-in-out">
    <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M12 2C6.477 2 2 6.477 2 12a10 10 0 009.21 9.95V14.41H9.13V12h2.08V9.39c0-2.06 1.262-3.182 3.098-3.182 1.082 0 2.007.08 2.27.116v2.485h-1.463c-1.145 0-1.362.545-1.362 1.343V12h2.738l-.356 2.41h-2.382v7.55A10.001 10.001 0 0022 12C22 6.477 17.523 2 12 2z"/>
    </svg>
    <span class="font-mono text-sm">Facebook</span>
  </a>

  <!-- Twitter Button -->
  <a href="#" class="flex items-center space-x-2 bg-stone-300 dark:bg-stone-700 text-stone-800 dark:text-stone-200 py-2 px-4 rounded-md hover:bg-stone-400 dark:hover:bg-stone-600 transition duration-300 ease-in-out">
     <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M24 4.557a9.983 9.983 0 01-2.828.775A4.993 4.993 0 0022.18 2.23a9.99 9.99 0 01-3.14 1.2c-1.12-.56-2.44-1-3.77-.96a4.995 4.995 0 00-4.994 4.994c0 .39.043.77.123 1.13C8.788 8.192 5.95 6.61 3.715 4.284a4.995 4.995 0 001.55 6.656A4.98 4.98 0 013.16 10.19v.06a4.994 4.994 0 004 4.9V15a4.995 4.995 0 01-4.472 2.177 9.999 9.999 0 005.43 1.59c6.515 0 10.075-5.38 10.075-10.08v-.475c.69-.5 1.288-1.127 1.86-1.81zm-4.45 2.19a.88.88 0 00-.04.17l-.2 1.2a.88.88 0 00.15.71c.19.21.45.33.73.38l1.3.18a.88.88 0 00.15.01c.47-.06.8-.47.74-.94l-.17-1.14a.88.88 0 00-.16-.7l-.7-.7a.88.88 0 00-.7-.16l-1.23-.17a.88.88 0 00-.2 0z"/>
    </svg>
    <span class="font-mono text-sm">Twitter</span>
  </a>

  <!-- Instagram Button -->
    <a href="#" class="flex items-center space-x-2 bg-stone-300 dark:bg-stone-700 text-stone-800 dark:text-stone-200 py-2 px-4 rounded-md hover:bg-stone-400 dark:hover:bg-stone-600 transition duration-300 ease-in-out">
     <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M12 2C8.41 2 7.98 2.01 6.61 2.07 5.24 2.13 4.36 2.32 3.62 2.65c-.73.33-1.35.78-1.97 1.4s-1.07 1.24-1.4 1.97c-.33.74-.52 1.6-.58 2.97-.07 1.37-.08 1.8-.08 5.39s.01 4.02.07 5.39c.06 1.38.25 2.26.58 2.97.33.73.78 1.35 1.4 1.97s1.24 1.07 1.97 1.4c.71.33 1.59.52 2.97.58 1.37.07 1.8.08 5.39.08s4.02-.01 5.39-.07c1.38-.06 2.26-.25 2.97-.58.73-.33 1.35-.78 1.97-1.4s1.07-1.24 1.4-1.97c.33-.71.52-1.59.58-2.97.07-1.37.08-1.8.08-5.39s-.01-4.02-.07-5.39c-.06-1.38-.25-2.26-.58-2.97-.33-.73-.78-1.35-1.4-1.97s-1.24-1.07-1.97-1.4c-.71-.33-1.59-.52-2.97-.58C16.02 2.01 15.59 2 12 2zm0 3.87c3.31 0 6.03 2.72 6.03 6.03s-2.72 6.03-6.03 6.03S5.97 15.21 5.97 12c0-3.31 2.72-6.03 6.03-6.03zm0 2.39c2.01 0 3.64 1.63 3.64 3.64s-1.63 3.64-3.64 3.64S8.36 14.01 8.36 12c0-2.01 1.63-3.64 3.64-3.64zm6.4-3.44c-.85 0-1.54.69-1.54 1.54s.69 1.54 1.54 1.54 1.54-.69 1.54-1.54-.69-1.54-1.54-1.54z"/>
    </svg>
    <span class="font-mono text-sm">Instagram</span>
  </a>

</div>

ソーシャル共有ボタンコンポーネント

Tailwind CSSを使用したダークモードでのEコマース用のソーシャルシェアボタンコンポーネント。シンプルでレスポンシブ、グレースケール。

プレビューを開く

                <div class="flex justify-center items-center space-x-4 bg-gray-900 p-4">
  <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 0C5.373 0 0 5.373 0 12c0 5.083 3.79 9.362 8.75 10.346V14.25H6.404V11.89h2.346V9.13c0-2.323 1.4-3.582 3.47-3.582 1.004 0 1.865.076 2.12.11v2.58h-1.53c-1.228 0-1.47.595-1.47 1.467v1.911h2.8L14.2 14.25h-2.8v7.196C18.21 21.362 22 17.083 22 12 22 5.373 17.627 0 12 0z"/>
    </svg>
  </a>
  <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M24 4.557a9.83 9.83 0 01-2.828.775 4.932 4.932 0 002.165-2.724c-1.036.617-2.19 1.064-3.427 1.31a4.918 4.918 0 00-8.384 4.482A13.952 13.952 0 011.67 3.148a4.929 4.929 0 001.523 6.574 4.89 4.89 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.99C8.072 14.912 7.6 14.976 7.11 14.992a4.943 4.943 0 004.6 3.438 9.857 9.857 0 01-6.114 2.107c-.398 0-.79-.023-1.175-.068a13.995 13.995 0 007.55 2.209c9.053 0 13.999-7.496 13.999-13.986 0-.19.004-.379.014-.568A10.035 10.035 0 0024 4.557z"/>
    </svg>
  </a>
  <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M20.664 3.703a5.003 5.003 0 00-3.742-2.918c-2.462-.511-4.9-.171-7.127.734-2.495 1.01-4.46 3.098-5.44 5.623C3.43 9.55 3.2 12.268 4 15c.758 2.61 2.517 5.08 5.042 6.106 2.567 1.034 5.82.36 8.11-1.87C19.74 17.775 21.277 15.125 21.6 12.25c.325-2.876-.316-5.69-1.136-8.547zM15.636 15.895a2.837 2.837 0 01-4.159-.129L9.613 13.8l-2.783.67c-.77.185-1.5-.575-1.313-1.354l.67-2.786-1.95-2.05a.964.964 0 01.257-1.35c.3-.273.73-.466 1.2-.53l2.783-.67 1.136-2.61.024-.05c.247-.581.975-.817 1.53-.576a.967.967 0 01.595.89l.67 2.783 2.783-.67c.77-.185 1.5.575 1.313 1.354l-.67 2.786 1.95 2.05a.964.964 0 01-.257 1.35c-.3.273-.73.466-1.2.53l-2.783.67-1.136 2.61-.024.05a.965.965 0 01-.93.682z"/>
    </svg>
  </a>
</div>

ソーシャルシェアボタン

ニューモーフィズムスタイル、単色の配色、ビジネス/企業のWebサイト向けのシンプルな複雑さを備えたソーシャル共有ボタン。Tailwind CSSを使用したダークテーマをサポートするレスポンシブデザイン。ニューモーフィックな効果に微妙な影を使用します。

プレビューを開く

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex space-x-4 p-6 rounded-xl shadow-inner bg-gray-300 dark:bg-gray-700">

    <!-- Facebook Button -->
    <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full shadow-lg bg-gray-300 dark:bg-gray-700 hover:shadow-xl transition duration-300">
      <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" 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.299c-1.213 0-1.58.756-1.58 1.536V12h3.06l-.49 3.03h-2.572v7.019C18.368 21.083 22 16.951 22 12z" clip-rule="evenodd" />
      </svg>
    </a>

    <!-- Twitter Button -->
    <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full shadow-lg bg-gray-300 dark:bg-gray-700 hover:shadow-xl transition duration-300">
       <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" 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 0-.355-.012-.53A8.348 8.348 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.509 4.079 4.079 0 01-1.852-.514c0 .021 0 .042 0 .063a4.186 4.186 0 003.303 4.102 4.23 4.23 0 01-1.89.072 4.165 4.165 0 003.823 2.899 8.345 8.345 0 01-5.139 1.77c-.335 0-.668-.023-.996-.069a11.7 11.7 0 006.29 1.84" />
      </svg>
    </a>

    <!-- LinkedIn Button -->
    <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full shadow-lg bg-gray-300 dark:bg-gray-700 hover:shadow-xl transition duration-300">
      <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" 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>
    </a>

    <!-- Email Button -->
     <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full shadow-lg bg-gray-300 dark:bg-gray-700 hover:shadow-xl transition duration-300">
       <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
         <path d="M.05 3.5c0-.82.68-1.5 1.5-1.5h21c.82 0 1.5.68 1.5 1.5v17c0 .82-.68 1.5-1.5 1.5h-21c-.82 0-1.5-.68-1.5-1.5V3.5zm1.5 1.5v.91l10.06 6.55L22.55 5.9V5h-21zm0 2.09l9.18 6.04.77.5c.15.1.37.1.52 0l.77-.5 9.18-6.04V19h-21V7.09z"/>
       </svg>
    </a>

  </div>
</div>

ソーシャル共有ボタンコンポーネント

ブログコンテンツ消費用のグレースケールのスキューモーフィックスタイルで設計されたレスポンシブソーシャル共有ボタンコンポーネント。ダークモードのサポートが含まれています。

プレビューを開く

                <div class="flex flex-col items-center bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Share This Article</h2>
    <div class="flex space-x-4 mb-6">
        <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="w-10 h-10 rounded-full">
            <a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Facebook</a>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="w-10 h-10 rounded-full">
            <a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Twitter</a>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="w-10 h-10 rounded-full">
            <a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">LinkedIn</a>
        </div>
        <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
            <img src="https://picsum.photos/40/40?random=4" alt="Email" class="w-10 h-10 rounded-full">
            <a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Email</a>
        </div>
    </div>
    <p class="text-gray-600 dark:text-gray-400 text-center text-sm">Share this with your friends and family!</p>
</div>

ソーシャル共有ボタンコンポーネント

eコマースWebサイト用に設計されたスキューモーフィックソーシャル共有ボタンコンポーネントで、グレースケールのカラースキームとダークモードのサポートを特長としています。

プレビューを開く

                <div class="flex justify-center p-4 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="flex space-x-4">
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=1" alt="Share on Facebook" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Facebook</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=2" alt="Share on Twitter" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Twitter</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=3" alt="Share on Instagram" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share on Instagram</span>
        </a>
        <a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
            <img src="https://picsum.photos/24?random=4" alt="Share via Email" class="mr-2 rounded-full">
            <span class="text-gray-700 dark:text-gray-200">Share via Email</span>
        </a>
    </div>
</div>

ソーシャル共有ボタンコンポーネント

ビジネス/企業のWebサイト用に設計されたNeumorphismスタイルのソーシャルシェアボタンコンポーネントで、アースカラーを使用し、ダークテーマをサポートします。

プレビューを開く

                <div class="flex justify-center items-center p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
    <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-white dark:bg-gray-900 shadow-neumorphism hover:shadow-neumorphism-hover transition-shadow duration-300">
        <img src="https://picsum.photos/seed/facebook/40/40" alt="Facebook" class="w-full h-full rounded-full object-cover" />
    </a>
    <a href="#" class="flex items-center justify-center w-12 h-12 mx-4 rounded-full bg-white dark:bg-gray-900 shadow-neumorphism hover:shadow-neumorphism-hover transition-shadow duration-300">
        <img src="https://picsum.photos/seed/twitter/40/40" alt="Twitter" class="w-full h-full rounded-full object-cover" />
    </a>
    <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-white dark:bg-gray-900 shadow-neumorphism hover:shadow-neumorphism-hover transition-shadow duration-300">
        <img src="https://picsum.photos/seed/linkedin/40/40" alt="LinkedIn" class="w-full h-full rounded-full object-cover" />
    </a>
</div>

<style>
    .shadow-neumorphism {
        box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), -8px -8px 20px rgba(255, 255, 255, 0.7);
    }
    .shadow-neumorphism-hover {
        box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3), -4px -4px 12px rgba(255, 255, 255, 0.5);
    }
</style>

ソーシャル共有ボタンコンポーネント

レトロ/ビンテージデザインとパステルカラーの配色でスタイル化されたレスポンシブソーシャルシェアボタンコンポーネントで、ダークモードをサポートし、ソーシャルメディアインターフェイスに適しています。

プレビューを開く

                <div class="container mx-auto p-6">
    <h2 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-4">Share This!</h2>
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
        <div class="bg-pink-200 dark:bg-pink-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://facebook.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Facebook</a>
        </div>
        <div class="bg-blue-200 dark:bg-blue-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=1" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://twitter.com" class="font-semibold text-gray-800 dark:text-gray-200">Tweet This</a>
        </div>
        <div class="bg-green-200 dark:bg-green-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=2" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://instagram.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Instagram</a>
        </div>
        <div class="bg-yellow-200 dark:bg-yellow-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=3" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://linkedin.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on LinkedIn</a>
        </div>
        <div class="bg-purple-200 dark:bg-purple-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=4" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://pinterest.com" class="font-semibold text-gray-800 dark:text-gray-200">Pin It</a>
        </div>
        <div class="bg-red-200 dark:bg-red-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=5" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://tumblr.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Tumblr</a>
        </div>
    </div>
</div>

ソーシャルシェアボタン

レスポンシブデザイン、ダークテーマのサポート、3Dの美学を特徴とするソーシャルシェアボタン。JavaScript は必要ありません。

プレビューを開く

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="flex space-x-4 p-6 bg-white rounded-lg shadow-xl dark:bg-gray-700">
        <!-- Facebook Button -->
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transform transition-transform perspective-1000 hover:rotateX-15 hover:-translateZ-10">
            <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.79c0-2.508 1.493-3.896 3.776-3.896 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.343 21.128 22 16.991 22 12z" />
            </svg>
        </a>

        <!-- Twitter Button -->
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full text-white bg-blue-400 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transform transition-transform perspective-1000 hover:rotateX-15 hover:-translateZ-10">
            <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 0-.35-.012-.523A8.143 8.143 0 0022 5.92a8.11 8.11 0 01-2.357.646 4.114 4.114 0 001.816-2.274c-.82-.485-1.73-.84A4.081 4.081 0 0010.95 3.515 4.121 4.121 0 007.07 6.5c0 .255.03.503.08.746A11.62 11.62 0 012.817 4.71a4.103 4.103 0 001.27 5.475 4.073 4.073 0 01-1.852-.514c0 0 0 .055 0 .088a4.118 4.118 0 003.306 4.032 4.202 4.202 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
            </svg>
        </a>

        <!-- LinkedIn Button -->
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transform transition-transform perspective-1000 hover:rotateX-15 hover:-translateZ-10">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path fill-rule="evenodd" d="M19 3a2 2 0 00-2-2H7a2 2 0 00-2 2v18a2 2 0 002 2h10a2 2 0 002-2V3zM9 8a1 1 0 01-1-1 1 1 0 011-1h6a1 1 0 011 1 1 1 0 01-1 1H9zm6 4a1 1 0 01-1 1H9a1 1 0 01-1-1 1 1 0 011-1h6a1 1 0 011 1zm0 4a1 1 0 01-1 1H9a1 1 0 01-1-1 1 1 0 011-1h6a1 1 0 011 1z" clip-rule="evenodd" />
                <path d="M12 18a3 3 0 100-6 3 3 0 000 6z" />
            </svg>
        </a>
    </div>
</div>

Tailwind CSSを使用したSkeuomorphicデザインでスタイル設定されたソーシャルシェアボタンのセット。グラデーション、シャドウ、ホバー/アクティブ効果を備えており、物理的なボタンをシミュレートします。このコンポーネントはレスポンシブで、CSS によるダークモードのサポートが含まれています。Facebook、Twitter、LinkedIn のボタンと、汎用のコピーリンクボタンが含まれています。

プレビューを開く

                <div class="flex flex-wrap gap-4 p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl">
  <!-- Facebook Button -->
  <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-blue-500 to-blue-700 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-blue-700 dark:to-blue-900 dark:shadow-blue-900/50 dark:hover:shadow-blue-900/70">
    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" 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.33v6.988C18.343 21.128 22 16.991 22 12z"></path></svg>
    Share on Facebook
  </a>

  <!-- Twitter Button -->
  <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-cyan-400 to-cyan-600 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-cyan-600 dark:to-cyan-800 dark:shadow-cyan-800/50 dark:hover:shadow-cyan-800/70">
     <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26L21.69 17.25h-2.918l-5.451-5.66L8.29 17.25H1.997l7.226-8.26L2.1 2.25h3.308l5.249 5.4l5.45-5.4zM18.088 19.5H22V17.25h-1.774c-.381 0-.736-.188-.958-.548l-3.296-5.15h-2.35l4.739 7.4H18.088zM6.667 5.5c-.381 0-.736.188-.958.548L2.413 11.2h2.35l4.74-7.4zm13.5-3.25z"></path></svg>
    Share on Twitter
  </a>

   <!-- LinkedIn Button -->
   <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-blue-700 to-blue-900 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-blue-900 dark:to-blue-950 dark:shadow-blue-950/50 dark:hover:shadow-blue-950/70">
    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 0H2v24h20V0zM8 19H5V8h3v11zM6.5 6.31C5.55 6.31 4.8 5.56 4.8 4.6S5.55 2.9 6.5 2.9s1.7 0.76 1.7 1.7S7.45 6.31 6.5 6.31zm15.5 12.69h-3v-5.6c0-1.3-.5-2.6-2-2.6-1.2 0-2 0.8-2 2v5.6h-3V8h3v1.5c0.5-0.8 1.6-1.5 3-1.5 2.5 0 4 1.6 4 5.8v6.2z"></path></svg>
    Share on LinkedIn
  </a>

  <!-- Generic Share Button (Copy Link) -->
   <a href="#" class="flex items-center justify-center px-6 py-3 bg-gradient-to-br from-teal-500 to-teal-700 text-white font-bold rounded-lg shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5 transition duration-200 ease-in-out dark:from-teal-700 dark:to-teal-900 dark:shadow-teal-900/50 dark:hover:shadow-teal-900/70">
    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 16.685v-5.008l4-3.997-4-3.997v-5.008h-8v5.005l4 3.994-4 3.994v5.005h8z m-6-1.769v-5.005l-4-3.994 4-3.994v-5.005h-8v5.008l4 3.997-4 3.997v5.008h8z"></path></svg>
    Copy Link
  </a>
</div>

レトロなソーシャルシェアボタン

レトロ/ビンテージデザイン、レスポンシブエフェクト、Tailwind CSSを使用したダークテーマのサポートを備えたソーシャルシェアボタンコンポーネント、JavaScriptは必要ありません。

プレビューを開く

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900" style="font-family: 'Press Start 2P', cursive;">
  <div class="flex space-x-4 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-retro">
    <a href="#" class="share-button facebook">
      <img src="https://img.icons8.com/fluent/48/000000/facebook-new.png" alt="Facebook" class="w-8 h-8">
    </a>
    <a href="#" class="share-button twitter">
      <img src="https://img.icons8.com/fluent/48/000000/twitter.png" alt="Twitter" class="w-8 h-8">
    </a>
    <a href="#" class="share-button instagram">
      <img src="https://img.icons8.com/fluent/48/000000/instagram.png" alt="Instagram" class="w-8 h-8">
    </a>
    <a href="#" class="share-button pinterest">
      <img src="https://img.icons8.com/fluent/48/000000/pinterest.png" alt="Pinterest" class="w-8 h-8">
    </a>
  </div>

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

    .shadow-retro {
        box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
    }

    .dark .shadow-retro {
        box-shadow: 8px 8px 0px rgba(255, 255, 255, 0.2);
    }

    .share-button {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem;
      border-radius: 0.5rem;
      transition: all 0.3s ease;
      border: 2px solid #000;
    }

     .dark .share-button {
        border: 2px solid #fff;
     }

    .share-button:hover {
      transform: translateY(-5px);
      box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
    }

    .dark .share-button:hover {
        box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.3);
    }

    .facebook {
      background-color: #4267B2;
    }
    .twitter {
      background-color: #1DA1F2;
    }
    .instagram {
      background-color: #E1306C;
    }
    .pinterest {
      background-color: #BD081C;
    }
  </style>
</div>

カテゴリ

ソーシャルシェアボタン

ソーシャル共有ボタンコンポーネント

ソーシャル共有ボタンコンポーネント

ソーシャルシェアボタン

ソーシャル共有ボタンコンポーネント

ソーシャル共有ボタンコンポーネント

ソーシャル共有ボタンコンポーネント

ソーシャル共有ボタンコンポーネント

ソーシャルシェアボタン

Skeuomorphicソーシャルシェアボタン

レトロなソーシャルシェアボタン