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

OAuth ボタン コンポーネント 1

魅力的なアニメーションとダークモードのサポートを備えたOAuthボタンを表示するコンポーネントで、デザインにTailwind CSSを利用しています。ボタンは微妙なマイクロインタラクションでユーザーのアクションに応答し、画像はランダムなプレースホルダーソースから含まれます。

プレビュー

HTMLコード 

<div class="flex justify-center items-center space-x-4 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <button class="flex items-center px-4 py-2 text-white bg-blue-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
        Sign in with Google
    </button>
    <button class="flex items-center px-4 py-2 text-white bg-red-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
        Sign in with Facebook
    </button>
    <button class="flex items-center px-4 py-2 text-white bg-blue-800 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-opacity-50">
        <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
        Sign in with Twitter
    </button>
</div>
<style>
    /* Dark Mode Styles */
    @media (prefers-color-scheme: dark) {
        button {
            background-color: #1e3a8a;
        }
    }
</style>

関連コンポーネント

OAuth ボタンコンポーネント

Tailwind CSS を使用してダーク モードで設計されたレスポンシブ OAuth ボタン コンポーネントで、暗い背景と暗い環境向けに最適化された UI 要素が特徴です。

開ける

OAuth ボタンコンポーネント

魅力的なアニメーションとアース トーンの色でデザインされたレスポンシブ OAuth ボタン コンポーネントで、ソーシャル メディア インターフェイスに適しており、ダーク テーマをサポートしています。

開ける

OAuth ボタンコンポーネント

Skeuomorphism デザイン、類似のカラースキーム、複雑なインタラクションを備えたレスポンシブ OAuth ボタンコンポーネントで、ソーシャル メディア インターフェイスに適しています。ダーク テーマのサポートが含まれており、JavaScript を使用せずにスタイル設定に Tailwind CSS を使用します。画像はLorem Picsumと RandomUser.me から提供されました。

開ける