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

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

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

Предварительный просмотр

HTML-код

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <h2 class="text-2xl font-bold text-green-700 dark:text-green-400 mb-4 animate-pulse">Sign in with</h2>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-brown-600 rounded-lg shadow-md hover:shadow-lg dark:bg-brown-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="Google Logo" class="w-6 h-6 rounded-full mr-2" />
        Google
    </button>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-blue-600 rounded-lg shadow-md hover:shadow-lg dark:bg-blue-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/26.jpg" alt="Facebook Logo" class="w-6 h-6 rounded-full mr-2" />
        Facebook
    </button>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-gray-700 rounded-lg shadow-md hover:shadow-lg dark:bg-gray-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="Twitter Logo" class="w-6 h-6 rounded-full mr-2" />
        Twitter
    </button>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-orange-600 rounded-lg shadow-md hover:shadow-lg dark:bg-orange-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="GitHub Logo" class="w-6 h-6 rounded-full mr-2" />
        GitHub
    </button>
</div>

Связанные компоненты

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

Сложный веб-компонент для кнопок OAuth, стилизованный под стеклянные и земляные тона, разработанный для бизнес/корпоративных сайтов с поддержкой адаптивности и темного режима.

Открытый

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

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

Открытый

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

Адаптивный компонент OAuth Buttons для пользовательского интерфейса электронной коммерции в темном режиме с пастельной цветовой схемой.

Открытый