Follow-Button-Komponente

Eine einfache, reaktionsschnelle Follow-Button-Komponente, die für Dating-/Social-Media-Plattformen mit pastellfarbenem Farbschema und Unterstützung für den Dunkelmodus entwickelt wurde.

Vorschau

HTML-Code

<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="follow-button flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold transition-all duration-300 ease-in-out
    bg-gradient-to-r from-purple-200 to-pink-200 text-purple-800 dark:from-purple-800 dark:to-pink-800 dark:text-white
    hover:from-purple-300 hover:to-pink-300 hover:text-purple-900 dark:hover:from-purple-700 dark:hover:to-pink-700 dark:hover:text-white
    focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700
    shadow-lg hover:shadow-xl">
    <svg class="h-5 w-5 mr-2 -ml-1 text-purple-700 dark:text-purple-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 0zM8 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0z"></path>
    </svg>
    Follow
  </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-Komponente

Eine reaktionsschnelle Follow-Button-Komponente, die nach den Prinzipien des Material Designs entwickelt wurde und Unterstützung für den Dunkelmodus und maßgeschneiderte Stile mit Tailwind CSS bietet.

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