CCHub Logo CCHub Tailwind Collection
コンポーネント ソーシャルシェアボタン ソーシャル共有ボタンコンポーネント

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

奥行きとエンゲージメントのために3次元要素を組み込んだ3Dデザインのレスポンシブソーシャルシェアボタンコンポーネント。CSSでダークテーマをサポートしています。

プレビュー

HTMLコード 

<div class="flex justify-center space-x-4 p-4">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-blue-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-blue-700">
            <i class="fab fa-facebook-f"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on Facebook</span>
    </div>
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-red-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-red-700">
            <i class="fab fa-twitter"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on Twitter</span>
    </div>
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-green-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-green-700">
            <i class="fab fa-linkedin-in"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on LinkedIn</span>
    </div>
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/40/40?random=4" alt="Avatar" class="mb-2 rounded-full shadow-lg">
        <a href="#" class="transition transform inline-block bg-purple-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-purple-700">
            <i class="fab fa-instagram"></i> 
        </a>
        <span class="text-gray-700 dark:text-gray-300">Share on Instagram</span>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
    }
</style>

関連コンポーネント

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

バウハウスにインスパイアされたスポーツ/フィットネスアプリケーション向けのソーシャルシェアボタンで、幾何学的なフォルムとブルーの色調が特徴です。ダークモードのサポートによるレスポンシブ。

開ける

ソーシャルシェアボタン

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

開ける

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

レトロ/ビンテージのソーシャルシェアボタンコンポーネントで、単色の配色が施されています。これは、ダークテーマをサポートする複雑でレスポンシブなデザインで、ポートフォリオに適しています。Tailwind CSSをJavaScriptなしで使用しています。

開ける