Boutons de partage social Neumorphic - Thème Emploi/Carrière
Un ensemble de boutons de partage social conçus avec un style neumorphique doux et des couleurs bonbon gaies, adaptés aux sites d’emploi ou aux plateformes de carrière. Dispose d’un design réactif et d’une prise en charge du mode sombre.
HTML Code
<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>Composants associés
Boutons de partage social
Boutons de partage social dotés d’un design réactif, d’une prise en charge du thème sombre et d’une esthétique 3D. Aucun JavaScript n’est requis.
Composant Boutons de partage social
Un composant de bouton de partage social ludique et amusant conçu pour les sites Web de jeux, avec une palette de couleurs arc-en-ciel dégradée, des éléments arrondis et des effets de survol interactifs. Entièrement réactif avec prise en charge du mode sombre.
Composant Boutons de partage social
Un composant rétro/vintage des boutons de partage social avec une palette de couleurs monochromatiques. Il s’agit d’un design complexe et réactif avec prise en charge du thème sombre, adapté à un portefeuille. Utilise Tailwind CSS sans JavaScript.