CCHub Logo CCHub Tailwind Collection
コンポーネント OAuth ボタン OAuth ボタンコンポーネント

OAuth ボタンコンポーネント

3D デザインスタイル、ダークテーマのサポート、プレースホルダー画像を備えたレスポンシブ OAuth ボタンコンポーネント。このコンポーネントには、Google、Facebook、Twitter、LinkedIn のボタンがあり、深度とエンゲージメントのホバー効果があります。

プレビュー

HTMLコード 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <h1 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Sign in with</h1>
    <div class="space-y-4">
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-600 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">
            <img src="https://picsum.photos/20/20?random=1" alt="Google" class="rounded-full mr-2" />
            Google
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-700 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-600 dark:bg-blue-800 dark:hover:bg-blue-700">
            <img src="https://picsum.photos/20/20?random=2" alt="Facebook" class="rounded-full mr-2" />
            Facebook
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-500 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
            <img src="https://picsum.photos/20/20?random=3" alt="Twitter" class="rounded-full mr-2" />
            Twitter
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-900 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-800 dark:bg-blue-900 dark:hover:bg-blue-800">
            <img src="https://picsum.photos/20/20?random=4" alt="LinkedIn" class="rounded-full mr-2" />
            LinkedIn
        </a>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
            color: #ffffff;
        }
    }
</style>

関連コンポーネント

OAuth ボタンコンポーネント

シンプルでレスポンシブな OAuth ボタン コンポーネントで、鮮やかな配色を備えたスキューモーフィック スタイルで設計され、e コマース プラットフォームに合わせて調整され、ダーク モードをサポートします。

開ける

OAuth ボタンコンポーネント

ビジネス/企業 Web サイト向けの 3 つの要素スキームと複雑なインタラクティブ要素を備えた、レスポンシブなダークをテーマにした OAuth ボタン コンポーネント。

開ける

OAuth ボタンコンポーネント

スキューモーフィック スタイルでデザインされた OAuth ボタン、レスポンシブ効果、Tailwind CSS を使用したダーク テーマのサポートを特徴とする Web コンポーネント。

開ける