CCHub Logo CCHub Tailwind Collection
Komponenten Schaltfläche "Folgen" Retro-Follow-Button-Komponente

Retro-Follow-Button-Komponente

Eine einfache, reaktionsschnelle Follow-Button-Komponente mit Retro-/Vintage-Ästhetik, komplementärem Farbschema und Gaming-Zwecken, einschließlich Unterstützung des Dunkelmodus.

Vorschau

HTML-Code 

<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="relative group flex items-center justify-center px-6 py-3 font-bold uppercase tracking-wider text-xl text-yellow-900 dark:text-yellow-100 transition-all duration-300 ease-in-out
    bg-gradient-to-br from-yellow-400 to-orange-500
    dark:from-yellow-700 dark:to-orange-800
    border-2 border-yellow-700 dark:border-yellow-900
    shadow-lg shadow-yellow-500/50 dark:shadow-yellow-900/50
    transform skew-x-[-10deg] hover:skew-x-0
    overflow-hidden
    rounded-lg
    focus:outline-none focus:ring-4 focus:ring-yellow-600 dark:focus:ring-yellow-800">
    
    <span class="relative z-10 flex items-center gap-2">
      <svg class="h-6 w-6 text-yellow-900 dark:text-yellow-100 transform -skew-x-[10deg] group-hover:skew-x-0 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 14v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0z"></path>
      </svg>
      <span class="transform -skew-x-[10deg] group-hover:skew-x-0 transition-transform duration-300">Follow Player</span>
    </span>

    <div class="absolute inset-0 bg-yellow-300 dark:bg-yellow-600 opacity-0 group-hover:opacity-30 transition-opacity duration-300 pointer-events-none"></div>

    <div class="absolute inset-0 border-2 border-yellow-800 dark:border-orange-900 border-dashed opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none transform scale-105 group-hover:scale-100"></div>

    <span class="absolute top-0 left-0 w-4 h-4 bg-yellow-700 dark:bg-yellow-900 transform -translate-x-1/2 -translate-y-1/2 rotate-45 opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out"></span>
    <span class="absolute bottom-0 right-0 w-4 h-4 bg-yellow-700 dark:bg-yellow-900 transform translate-x-1/2 translate-y-1/2 rotate-45 opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out"></span>
  </button>
</div>

Verwandte Komponenten

Follow-Button-Komponente

Eine komplexe, reaktionsschnelle Follow-Button-Komponente mit Glassmorphism-Stil und lebendigen Farben, die für Unternehmenswebsites mit Unterstützung für den Dunkelmodus mit Tailwind CSS entwickelt wurde.

Offen

Follow Button mit Mikrointeraktionen

Responsive Follow Button Component mit Unterstützung für dunkle Themen und Mikrointeraktionen, entwickelt für Social-Media-Anwendungen mit Tailwind CSS. Mit monochromatischem Farbschema und komplexen interaktiven Elementen.

Offen

Glassmorphism_Music_Follow_Button_Component

Eine komplexe, monochromatische Glasmorphismus-Follow-Button-Komponente, die für Musik- und Audioplattformen entwickelt wurde, mit mattglasähnlichen, durchscheinenden Elementen mit Unschärfeeffekten, vollständig reaktionsschnell und mit Unterstützung des Dunkelmodus.

Offen