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>

関連コンポーネント

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

スキューモーフィックなデザイン原則で設計されたレスポンシブなソーシャル共有ボタンコンポーネントで、現実世界のオブジェクトを模倣するボタンとダークテーマのサポートを特徴としています。このコンポーネントは Tailwind CSS を使用してスタイル設定され、picsum.photos のプレースホルダー画像と randomuser.me のアバターが含まれています。

開ける

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

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

開ける

Skeuomorphic Earth Tone ソーシャル共有ボタン

アースカラーを使用したスキューモーフィックデザインでスタイリングされたソーシャルシェアボタンのセット。機能には、レスポンシブレイアウトと、ホバー時のインタラクティブなプレス効果を備えたダークモードのサポートが含まれ、純粋にHTMLおよびTailwind CSSクラスで構築されています。

開ける