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

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

レスポンシブなソーシャルシェアボタンコンポーネントは、glassmorphismエフェクトでスタイル設定され、明るいテーマと暗いテーマの両方をサポートします。

プレビュー

HTMLコード 

<div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
    <a href="https://facebook.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="rounded-full">
    </a>
    <a href="https://twitter.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="rounded-full">
    </a>
    <a href="https://linkedin.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="rounded-full">
    </a>
    <a href="https://instagram.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=4" alt="Instagram" class="rounded-full">
    </a>
</div>

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

関連コンポーネント

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

ニュースやジャーナリズムのWebサイト向けに設計されたエレガントでレスポンシブなソーシャル共有ボタンコンポーネントで、豪華なフォレスト/グリーンのカラーパレットとダークモードのサポートが特徴です。これには、さまざまなプラットフォームで記事を共有するための複数のインタラクティブ要素が含まれています。

開ける

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

ソーシャルシェアボタン マイクロインタラクション、グレースケールの配色、ソーシャルメディアインターフェイスの適度な複雑さ、ダークテーマをサポートするレスポンシブデザインを備えたコンポーネント。

開ける

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

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

開ける