Componenti
Pulsanti di condivisione social
Pulsanti di condivisione social neumorfici - Tema lavoro/carriera
Pulsanti di condivisione social neumorfici - Tema lavoro/carriera
Una serie di pulsanti di condivisione social progettati con uno stile neumorfico morbido e allegri colori caramella, adatti per bacheche di lavoro o piattaforme di carriera. Presenta un design reattivo e supporto per la modalità oscura.
Codice HTML
<div class="p-6 sm:p-8 md:p-10 bg-[#e0e5ec] dark:bg-[#2c2f33] min-h-screen flex items-center justify-center font-sans">
<div class="p-6 rounded-3xl shadow-xl dark:shadow-md transition-all duration-300 transform bg-[#e0e5ec] dark:bg-[#34373b] max-w-lg w-full
shadow-[inset_7px_7px_15px_#bebebe,inset_-7px_-7px_15px_#ffffff]
dark:shadow-[inset_7px_7px_15px_#272a2e,inset_-7px_-7px_15px_#41454c]">
<h2 class="text-center text-2xl sm:text-3xl font-bold mb-6 text-[#6a6a6a] dark:text-[#a0a0a0]">Share This Opportunity!</h2>
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
<!-- LinkedIn Button -->
<button class="neumorphic-button group">
<div class="bg-[#0A66C2] p-3 rounded-full shadow-lg transition-all duration-300 group-hover:scale-110">
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
</svg>
</div>
<span class="mt-2 text-sm font-medium text-[#6a6a6a] dark:text-[#a0a0a0]">LinkedIn</span>
</button>
<!-- Twitter Button -->
<button class="neumorphic-button group">
<div class="bg-[#1DA1F2] p-3 rounded-full shadow-lg transition-all duration-300 group-hover:scale-110">
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.447 0-6.227 2.78-6.227 6.228 0 .486.052.958.156 1.41-.519-.026-1.02-.13-1.498-.291-5.185-2.618-8.714-8.243-9.041-9.982-.574-.291-1.127-.477-1.645-.555-.175.71.076 1.343.344 1.83 1.13 1.942 3.197 4.195 6.25 5.86-1.785.426-3.599.664-5.467.664-.813 0-1.605-.074-2.373-.218-1.928-1.18-.737-3.08-1.641-3.415-.828-1.096-1.157-2.327-.923-3.031.956.408 2.016.634 3.13.634.502 0 .991-.064 1.463-.195 1.77-.478 3.013-1.643 3.42-3.045.399-1.396.115-2.906-.838-3.955-1.077-1.2-2.79-1.93-4.66-1.93-2.043 0-3.513 1.05-4.2 2.37-.504.996-.757 2.083-.757 3.245 0 1.2.228 2.348.683 3.393.425 1.002.99 1.89 1.672 2.628 3.535 3.738 8.016 6.012 12.607 6.012 3.824 0 7.37-1.385 9.948-3.57 1.042-2.146 1.62-4.526 1.62-7.05v-.268c.843-.687 1.564-1.547 2.142-2.502z" />
</svg>
</div>
<span class="mt-2 text-sm font-medium text-[#6a6a6a] dark:text-[#a0a0a0]">Twitter</span>
</button>
<!-- Facebook Button -->
<button class="neumorphic-button group">
<div class="bg-[#1877F2] p-3 rounded-full shadow-lg transition-all duration-300 group-hover:scale-110">
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.248-1.333 1.172-1.333h2.828v-5h-3.964c-3.344 0-4.036 2.338-4.036 4.622v1.378z" />
</svg>
</div>
<span class="mt-2 text-sm font-medium text-[#6a6a6a] dark:text-[#a0a0a0]">Facebook</span>
</button>
<!-- Email Button -->
<button class="neumorphic-button group">
<div class="bg-[#EA4335] p-3 rounded-full shadow-lg transition-all duration-300 group-hover:scale-110">
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M0 3v18h24v-18h-24zm6.623 7.929l-6.623 5.671v-11.52zm11.377 5.671l-6.623-5.671 6.623-5.671v11.342zm-12.87-9.521l-3.38 2.901 3.38 3.598v-6.499zm16.75 6.499v-3.598l3.38-2.901-3.38-3.598z" />
</svg>
</div>
<span class="mt-2 text-sm font-medium text-[#6a6a6a] dark:text-[#a0a0a0]">Email</span>
</button>
<!-- WhatsApp Button -->
<button class="neumorphic-button group">
<div class="bg-[#25D366] p-3 rounded-full shadow-lg transition-all duration-300 group-hover:scale-110">
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M.057 24l1.687-6.163c-1.041-1.804-1.39-3.901-.767-6.183 1.055-3.824 4.398-6.529 8.3-6.529 3.901 0 7.244 2.705 8.3 6.529.624 2.282.275 4.379-1.041 6.183l1.687 6.163-6.334-1.993c-1.854 1.066-3.975 1.636-6.196 1.636-4.996 0-9.064-4.064-9.064-9.064s4.068-9.064 9.064-9.064c4.996 0 9.064 4.064 9.064 9.064h-3c0-3.323-2.677-6-6-6-3.323 0-6 2.677-6 6s2.677 6 6 6c1.118 0 2.164-.309 3.068-.846l-1.068-.337 1.687 6.163zm-4.322-14.773c-1.393-.574-2.955-.87-4.593-.87-3.901 0-7.244 2.705-8.3 6.529-.624 2.282-.275 4.379 1.041 6.183l1.687 6.163 6.334-1.993c1.854 1.066 3.975 1.636 6.196 1.636 4.996 0 9.064-4.064 9.064-9.064s-4.068-9.064-9.064-9.064c-3.901 0-7.244 2.705-8.3 6.529z" />
</svg>
</div>
<span class="mt-2 text-sm font-medium text-[#6a6a6a] dark:text-[#a0a0a0]">WhatsApp</span>
</button>
</div>
<p class="text-center text-sm font-light mt-6 text-[#9ca3af] dark:text-[#6b7280]">Help a friend find their next big career move!</p>
</div>
<style>
.neumorphic-button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem;
border-radius: 1.5rem; /* 24px */
cursor: pointer;
transition: all 0.3s ease-in-out;
background-color: #e0e5ec;
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
text-decoration: none;
}
.neumorphic-button:hover {
background-color: #e8edff;
transform: translateY(-2px);
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}
.neumorphic-button:active {
box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
transform: translateY(1px);
}
/* Dark Mode Styles */
html.dark .neumorphic-button {
background-color: #34373b;
box-shadow: 7px 7px 15px #272a2e, -7px -7px 15px #41454c;
}
html.dark .neumorphic-button:hover {
background-color: #3b3e42;
box-shadow: 5px 5px 10px #272a2e, -5px -5px 10px #41454c;
}
html.dark .neumorphic-button:active {
box-shadow: inset 5px 5px 10px #272a2e, inset -5px -5px 10px #41454c;
}
</style>
</div>Componenti correlati
Componente Pulsanti di condivisione social
Un componente di condivisione social pulito e minimalista per le interfacce finanziarie/bancarie, caratterizzato da nero, bianco e un colore d'accento, con reattività completa e supporto per la modalità scura.
Componente Pulsanti di condivisione social
Un componente reattivo dei pulsanti di condivisione social progettato in uno stile glassmorphism con una combinazione di colori monocromatica per i siti di e-commerce. È dotato di elementi traslucidi simili al vetro smerigliato, include più pulsanti interattivi per la condivisione sui social media e supporta la modalità oscura utilizzando Tailwind CSS.
Componente Pulsanti di condivisione social
Un componente minimalista per i pulsanti di condivisione social progettato con Tailwind CSS, con layout reattivo e supporto per temi scuri. Il componente include pulsanti per la condivisione su piattaforme di social media popolari con elementi di design puliti e semplici.