Компоненты Кнопки 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

Скевоморфные кнопки OAuth, разработанные для имитации реальных элементов с земляными тонами, предназначены для интерфейсов социальных сетей.

Открытый

Компонент кнопок OAuth

Набор кнопок OAuth, выполненных в брутальной эстетике и Tailwind CSS, с отзывчивыми эффектами и поддержкой темных тем.

Открытый

Компонент кнопок OAuth

Простой, отзывчивый компонент кнопок OAuth, выполненный в скевоморфном стиле с яркой цветовой гаммой, адаптированный для платформ электронной коммерции и поддерживающий темный режим.

Открытый