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
Composant Boutons de partage social
Composant de boutons de partage social avec un design rétro/vintage, une palette de couleurs de tons de terre, un niveau de complexité simple et un design réactif avec prise en charge du thème sombre, à des fins de médias sociaux à l’aide de Tailwind CSS.
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 minimaliste de boutons de partage social conçu avec Tailwind CSS, avec une mise en page réactive et une prise en charge du thème sombre. Le composant comprend des boutons de partage sur les plateformes de médias sociaux populaires avec des éléments de conception simples et épurés.