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

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

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

プレビュー

HTMLコード

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

関連コンポーネント

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

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

開ける

ソーシャルシェアボタン

ソーシャル共有ボタンコンポーネント Glassmorphism デザイン、レスポンシブエフェクト、ダークテーマのサポート。JavaScriptは使用しておりません。

開ける

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

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

開ける