CCHub Logo CCHub Tailwind Collection
Komponenten OAuth-Schaltflächen OAuth-Schaltflächenkomponente (Dunkelmodus, monochromatisch)

OAuth-Schaltflächenkomponente (Dunkelmodus, monochromatisch)

Responsive OAuth Buttons-Komponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Verwendet ein monochromatisches Farbschema mit dunklem Hintergrund.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-900 p-4">
  <div class="w-full max-w-sm p-6 bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-center text-gray-100 mb-6">Login or Sign Up</h2>
    <div class="flex flex-col space-y-4">
      <button class="flex items-center justify-center px-4 py-2 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-100 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-gray-500">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M10 0C4.477 0 0 4.477 0 10c0 4.418 2.865 8.165 6.839 9.489.5.092.682-.216.682-.48v-1.693c-2.791.611-3.365-1.34-3.365-1.34-.455-1.157-1.11-1.464-1.11-1.464-.908-.618.069-.606.069-.606 1.003.07 1.531 1.032 1.531 1.032.892 1.526 2.341 1.082 2.91.829.091-.642.357-1.082.654-1.333-2.22-.253-4.555-1.11-4.555-4.949 0-1.092.39-1.984 1.029-2.682-.103-.253-.446-1.272.098-2.65 0 0 .84-.268 2.75 1.025A9.776 9.776 0 0110 4.388c.85.006 1.7.103 2.504.304 1.909-1.293 2.747-1.025 2.747-1.025.546 1.379.202 2.398.099 2.65a3.736 3.736 0 011.029 2.682c0 3.84-2.335 4.69-4.565 4.943.37.316.68.921.68 1.852v2.755c0 .268.18.579.688.488C17.137 18.165 20 14.418 20 10A10 10 0 0010 0z" clip-rule="evenodd"></path>
        </svg>
        Continue with GitHub
      </button>
      <button class="flex items-center justify-center px-4 py-2 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-100 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-gray-500">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.625c0-2.515 1.493-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.453h-1.267c-1.243 0-1.63.771-1.63 1.562V10h2.77l-.443 2.894h-2.327V20A10 10 0 0020 10z"></path>
        </svg>
        Continue with Facebook
      </button>
      <button class="flex items-center justify-center px-4 py-2 border border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-100 bg-gray-700 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-gray-500">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path d="M19.243 9.243a9.93 9.93 0 00-.02-1.483c-.1-.52-.253-1.026-.458-1.518l-.105-.238a9.964 9.964 0 00-1.014-1.428l-.16-.215-.142-.179A9.986 9.986 0 0010 .009a10 10 0 00-9.24 5.757 9.93 9.93 0 00-.02 1.483c-.1.52-.252 1.027-.457 1.518l-.105.238a9.964 9.964 0 00-1.014 1.428l-.16.215-.142.179A9.986 9.986 0 000 10.009a10 10 0 009.24 5.757 9.93 9.93 0 00.02-1.483c.1-.52.253-1.026.458-1.518l.105-.238a9.964 9.964 0 001.014-1.428l.16-.215.142-.179A9.986 9.986 0 0020 10.009a10 10 0 00-9.24-5.766zM10 14a4 4 0 110-8 4 4 0 010 8z"></path>
        </svg>
        Continue with Google
      </button>
    </div>
  </div>
</div>

Verwandte Komponenten

OAuth-Schaltflächen-Komponente

Eine reaktionsschnelle OAuth-Schaltflächenkomponente mit einem 3D-Designstil, Unterstützung für dunkle Designs und Platzhalterbildern. Die Komponente verfügt über Schaltflächen für Google, Facebook, Twitter und LinkedIn mit Hover-Effekten für Tiefe und Engagement.

Offen

OAuth-Schaltflächen-Komponente

Eine Webkomponente mit OAuth-Schaltflächen, die mit einem skeuomorphen Stil gestaltet sind, responsiven Effekten und Unterstützung für dunkle Designs mit Tailwind CSS.

Offen

OAuth-Schaltflächen-Komponente 1

Eine Komponente, die OAuth-Schaltflächen mit ansprechenden Animationen und Unterstützung für den Dunkelmodus anzeigt und Tailwind CSS für das Design verwendet. Die Schaltflächen reagieren auf Benutzeraktionen mit subtilen Mikrointeraktionen, und Bilder werden aus zufälligen Platzhalterquellen eingefügt.

Offen