Компоненты Кнопки 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, выполненными в скевоморфном стиле, адаптивными эффектами и поддержкой темных тем с использованием Tailwind CSS.

Открытый