Componente Neumorfico Pulsante Segui
Un componente complesso del pulsante di inseguimento in stile neumorfico con toni caldi e tramontanti, progettato per le piattaforme immobiliari. È dotato di un design reattivo e del supporto per la modalità oscura, che fa sembrare che gli elementi vengano estrusi dallo sfondo utilizzando ombre sottili.
Codice HTML
<div class="p-6 md:p-10 bg-orange-100 dark:bg-zinc-800 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-sm rounded-3xl p-6 shadow-xl relative
bg-gradient-to-br from-orange-200 to-amber-100
dark:from-zinc-700 dark:to-zinc-900
dark:shadow-zinc-950/80 shadow-orange-300/60
">
<!-- Neumorphic Card Base -->
<div class="relative z-10">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center space-x-4">
<img class="w-16 h-16 rounded-full
border-2 border-orange-300 dark:border-zinc-600
shadow-lg shadow-orange-300/40 dark:shadow-zinc-950/60
object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Agent Avatar">
<div>
<h3 class="text-xl font-semibold text-orange-900 dark:text-orange-200">Evelyn Sharp</h3>
<p class="text-sm text-orange-700 dark:text-zinc-400">Senior Agent</p>
</div>
</div>
<!-- More Info Button -->
<a href="#" class="
px-4 py-2 rounded-xl text-sm font-medium
bg-gradient-to-br from-orange-300 to-amber-200
dark:from-zinc-600 dark:to-zinc-800
text-orange-900 dark:text-orange-200
shadow-inner shadow-orange-400/60 dark:shadow-zinc-900/60
hover:from-orange-400 hover:to-orange-300
dark:hover:from-zinc-700 dark:hover:to-zinc-600
transform transition-transform duration-300 hover:scale-105
active:shadow-none active:scale-95
sm: block md:inline-block">
More Info
</a>
</div>
<p class="text-orange-800 dark:text-zinc-300 mb-6 text-sm leading-relaxed">
Specializing in luxury residential properties in metropolitan areas. Over 10 years of experience helping clients find their dream homes.
</p>
<!-- Key Stats / Properties -->
<div class="grid grid-cols-2 gap-4 mb-8">
<div class="
p-4 rounded-xl text-center
bg-gradient-to-br from-orange-100 to-amber-50
dark:from-zinc-700 dark:to-zinc-900
shadow-md shadow-orange-200/50 dark:shadow-zinc-950/50
border border-orange-200/50 dark:border-zinc-800/50
">
<p class="text-lg font-bold text-orange-900 dark:text-orange-200">150+</p>
<p class="text-sm text-orange-700 dark:text-zinc-400">Properties Sold</p>
</div>
<div class="
p-4 rounded-xl text-center
bg-gradient-to-br from-orange-100 to-amber-50
dark:from-zinc-700 dark:to-zinc-900
shadow-md shadow-orange-200/50 dark:shadow-zinc-950/50
border border-orange-200/50 dark:border-zinc-800/50
">
<p class="text-lg font-bold text-orange-900 dark:text-orange-200">4.9</p>
<p class="text-sm text-orange-700 dark:text-zinc-400">Rating</p>
</div>
</div>
<!-- Follow Button -->
<button class="
w-full py-4 rounded-2xl text-lg font-bold
bg-gradient-to-br from-orange-400 to-amber-300
dark:from-amber-600 dark:to-orange-500
text-orange-950 dark:text-zinc-950
shadow-lg shadow-orange-500/60 dark:shadow-amber-900/60
hover:from-orange-500 hover:to-orange-400
dark:hover:from-amber-700 dark:hover:to-orange-600
transform transition-transform duration-300
focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100
dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900
active:shadow-none active:scale-98
flex items-center justify-center space-x-2
">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 1 014 4v6a4 4 01-4 4H8a4 4 01-4-4v-6a4 4 014-4h4z" />
</svg>
<span>Follow Agent</span>
</button>
<!-- Contact Options -->
<div class="flex justify-around mt-8">
<button class="
p-4 rounded-full
bg-gradient-to-br from-orange-200 to-amber-100
dark:from-zinc-700 dark:to-zinc-900
text-orange-700 dark:text-orange-200
shadow-md shadow-orange-300/50 dark:shadow-zinc-950/50
hover:from-orange-300 hover:to-orange-200
dark:hover:from-zinc-800 dark:hover:to-zinc-700
transform transition-transform duration-300 hover:scale-110
active:shadow-none active:scale-95
focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100
dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900
">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 011.854-1.995A2 2 018 2h8a2 2 011.819 1.056l-3.328 10.655a2 2 01-1.077 1.077L13 18.066V20h-2v-1.934L7.509 15.7A2 2 016.438 14.623L3.181 4.944A2 2 013 5z" />
</svg>
</button>
<button class="
p-4 rounded-full
bg-gradient-to-br from-orange-200 to-amber-100
dark:from-zinc-700 dark:to-zinc-900
text-orange-700 dark:text-orange-200
shadow-md shadow-orange-300/50 dark:shadow-zinc-950/50
hover:from-orange-300 hover:to-orange-200
dark:hover:from-zinc-800 dark:hover:to-zinc-700
transform transition-transform duration-300 hover:scale-110
active:shadow-none active:scale-95
focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100
dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900
">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 01-4.255-1.106L4 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</button>
<button class="
p-4 rounded-full
bg-gradient-to-br from-orange-200 to-amber-100
dark:from-zinc-700 dark:to-zinc-900
text-orange-700 dark:text-orange-200
shadow-md shadow-orange-300/50 dark:shadow-zinc-950/50
hover:from-orange-300 hover:to-orange-200
dark:hover:from-zinc-800 dark:hover:to-zinc-700
transform transition-transform duration-300 hover:scale-110
active:shadow-none active:scale-95
focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100
dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900
">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 010.591 1.409L2.5 12l.529.071c.783.111 1.547.452 2.18.98L7.058 15.65h.001a4.522 4.522 004.582 0l2.35-1.921c.633-.528 1.397-.869 2.18-.98l.529-.071L18.5 5a2 2 00-1.802-1.802zM15 11a3 3 01-3 3s-3-3-3-3" />
</svg>
</button>
</div>
</div>
</div>
</div>Componenti correlati
Componente pulsante Segui
Un componente reattivo del pulsante Segui/Smetti di seguire adatto per siti Web di eventi e conferenze, con transizioni sfumate, supporto per la modalità scura e un colore di accento brillante. Include un sottile effetto al passaggio del mouse e modifica il testo e lo sfondo al clic (simulato).
Componente pulsante Segui
Un componente reattivo Segui pulsante progettato con i principi del Material Design, con supporto per la modalità oscura e stili su misura utilizzando Tailwind CSS.
3D_Analogous_Simple_Follow_Button_Component
Un pulsante "Segui" semplice e reattivo con un'estetica 3D e una combinazione di colori analoga, adatto per un sito portfolio, che supporta le modalità chiare e scure.