RetroOAuthボタン
シンプルなレトロなテーマの OAuth ボタン コンポーネントで、トライアドの配色で、ポートフォリオ サイトに最適です。レスポンシブデザインとダークモードのサポートが特徴で、80年代/90年代の美学を彷彿とさせます。
HTMLコード
<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>