検索コンポーネント

カテゴリ

コンポーネントソーシャルシェアボタン

ソーシャルシェアボタン

ソーシャルメディアにコンテンツを共有するためのボタン

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

ダークモードUI用のソーシャルシェアボタンコンポーネントは、Tailwind CSS、グレースケールの配色、シンプルな複雑さ、ポートフォリオの目的、ダークテーマをサポートするレスポンシブデザインを使用します。

                <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>

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

ブルータリズムデザイン、鮮やかな配色、Eコマースの複雑な複雑さのレベルを備えたソーシャルシェアボタンコンポーネント、レスポンシブデザイン、Tailwind CSSを使用したダークテーマのサポート。JavaScript はありません。

開けるプレビュー

                <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ソーシャルシェアボタン

レスポンシブソーシャル共有ボタンコンポーネント、スキューモーフィックデザイン、モノクロカラースキーム、複雑なインタラクション、ダークテーマのサポート。ブログやコンテンツサイト向けに設計されています。

開けるプレビュー

                <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>

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

レトロ/ビンテージデザイン、アースカラーの配色、シンプルな複雑さのレベル、ダークテーマをサポートするレスポンシブデザインのソーシャルシェアボタンコンポーネント、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>