CCHub Logo CCHub Tailwind Collection
Komponenten OAuth-Schaltflächen RetroOAuthButtons

RetroOAuthButtons

Eine einfache OAuth-Schaltflächenkomponente im Retro-Stil mit einem triadischen Farbschema, ideal für eine Portfolio-Site. Verfügt über ein ansprechendes Design und Unterstützung für den Dunkelmodus, das an die Ästhetik der 80er/90er Jahre erinnert.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-lime-100 dark:bg-zinc-900 transition-colors duration-300">
  <div class="w-full max-w-sm p-6 rounded-lg shadow-xl bg-orange-200 dark:bg-violet-900 border-4 border-lime-500 dark:border-orange-500 transform -skew-x-3 rotate-1 transition-all duration-300">
    <h2 class="text-center text-3xl font-extrabold text-lime-800 dark:text-lime-200 mb-6 font-mono tracking-widest uppercase animate-pulse-text">ACCESS GRANTED</h2>
    <div class="space-y-4">
      <button class="flex items-center justify-center w-full px-5 py-3 border-2 border-lime-600 dark:border-lime-200 text-lime-800 dark:text-lime-200 text-lg font-bold rounded-lg shadow-md bg-orange-400 dark:bg-lime-800 hover:bg-lime-400 dark:hover:bg-orange-600 transform hover:scale-105 transition-all duration-200 group relative overflow-hidden">
        <span class="absolute inset-0 bg-lime-500 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></span>
        <svg class="w-6 h-6 mr-3 text-orange-900 dark:text-orange-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.07 18h-2.93v-8.001h2.93v8.001zm-1.464-9.351c-.966 0-1.75-.783-1.75-1.75s.784-1.75 1.75-1.75 1.75.783 1.75 1.75-.784 1.75-1.75 1.75zm12.464 9.351h-3.04v-4.996c0-.987-.45-1.472-1.077-1.473-.591 0-1.026.398-1.189.771-.16.368-.171.86-.171 1.055v4.643h-2.93v-8.001h2.93v1.272c.38-.601 1.057-.991 1.782-.991 1.344 0 2.383.882 2.383 2.766v4.954z"/>
        </svg>
        LOGIN WITH GIT
      </button>
      <button class="flex items-center justify-center w-full px-5 py-3 border-2 border-lime-600 dark:border-lime-200 text-lime-800 dark:text-lime-200 text-lg font-bold rounded-lg shadow-md bg-orange-400 dark:bg-lime-800 hover:bg-lime-400 dark:hover:bg-orange-600 transform hover:scale-105 transition-all duration-200 group relative overflow-hidden">
        <span class="absolute inset-0 bg-lime-500 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></span>
        <svg class="w-6 h-6 mr-3 text-orange-900 dark:text-orange-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.07 18h-2.93v-8.001h2.93v8.001zm-1.464-9.351c-.966 0-1.75-.783-1.75-1.75s.784-1.75 1.75-1.75 1.75.783 1.75 1.75-.784 1.75-1.75 1.75zm12.464 9.351h-3.04v-4.996c0-.987-.45-1.472-1.077-1.473-.591 0-1.026.398-1.189.771-.16.368-.171.86-.171 1.055v4.643h-2.93v-8.001h2.93v1.272c.38-.601 1.057-.991 1.782-.991 1.344 0 2.383.882 2.383 2.766v4.954z"/>
        </svg>
        LOGIN WITH BOOK
      </button>
      <button class="flex items-center justify-center w-full px-5 py-3 border-2 border-lime-600 dark:border-lime-200 text-lime-800 dark:text-lime-200 text-lg font-bold rounded-lg shadow-md bg-orange-400 dark:bg-lime-800 hover:bg-lime-400 dark:hover:bg-orange-600 transform hover:scale-105 transition-all duration-200 group relative overflow-hidden">
        <span class="absolute inset-0 bg-lime-500 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></span>
        <svg class="w-6 h-6 mr-3 text-orange-900 dark:text-orange-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.07 18h-2.93v-8.001h2.93v8.001zm-1.464-9.351c-.966 0-1.75-.783-1.75-1.75s.784-1.75 1.75-1.75 1.75.783 1.75 1.75-.784 1.75-1.75 1.75zm12.464 9.351h-3.04v-4.996c0-.987-.45-1.472-1.077-1.473-.591 0-1.026.398-1.189.771-.16.368-.171.86-.171 1.055v4.643h-2.93v-8.001h2.93v1.272c.38-.601 1.057-.991 1.782-.991 1.344 0 2.383.882 2.383 2.766v4.954z"/>
        </svg>
        LOGIN WITH SPACE
      </button>
    </div>
    <p class="text-center text-sm text-lime-700 dark:text-violet-300 mt-6 font-sans italic">Prepare for System Initialization</p>
  </div>
</div>

Verwandte Komponenten

OAuth-Schaltflächen-Komponente

Eine OAuth Buttons-Komponente im Neumorphism-Stil, die für einen Blog oder eine Plattform zum Konsum von Inhalten entwickelt wurde. Die Komponente verfügt über Schaltflächen für verschiedene OAuth-Anbieter mit responsivem Design, Unterstützung für dunkle Themen und einem monochromatischen Farbschema.

Offen

OAuth-Schaltflächen-Komponente

Eine Webkomponente mit OAuth-Schaltflächen mit einem 3D-Designstil, responsiven Effekten, Unterstützung für dunkle Designs und Platzhalterbildern.

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