DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Social Share Button - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
Social Share Button
ankushsingh
Jan 14, 2026
17
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> <div class="sharing-container"> <div class="toggle-wrapper"> <div class="share-toggle"> <i class="fa-solid fa-share-nodes"></i> <span class="share-text">Share</span> </div> <div class="social-list"> <a href="#" class="social-btn instagram" style="--d: 1;" title="Instagram"> <i class="fa-brands fa-instagram"></i> </a> <a href="#" class="social-btn facebook" style="--d: 2;" title="Facebook"> <i class="fa-brands fa-facebook-f"></i> </a> <a href="#" class="social-btn twitter" style="--d: 3;" title="Twitter"> <i class="fa-brands fa-x-twitter"></i> </a> </div> </div> </div>
1
:root { --toggle-grad: linear-gradient(135deg, #D70000, #FF3164); --insta-color: #00CB0A; --fb-color: #066DFF; --tw-color: #FF1B1B; --bg-soft: #FBFBFB; --shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Stronger drop shadow */ } body { background-color: #000; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: 'Poppins', sans-serif; } .sharing-container { background: var(--bg-soft); padding: 60px 100px; border-radius: 12px; border: 1px solid #ECECEC; } .toggle-wrapper { display: flex; align-items: center; position: relative; } .share-toggle { display: flex; align-items: center; gap: 10px; background: var(--toggle-grad); color: white; padding: 12px 25px; border-radius: 50px; z-index: 10; box-shadow: var(--shadow); } .social-list { display: flex; gap: 15px; padding-left: 0px; pointer-events: none; /* Prevents clicking icons while hidden */ } .social-btn { width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; text-decoration: none; font-size: 20px; background: white; border: 1px solid #ECECEC; box-shadow: var(--shadow); /* Initial State: Hidden and shifted left */ opacity: 0; transform: translateX(-20px); /* Transition handles the Fade and Move */ /* The delay is calculated based on the --d variable in HTML */ transition: all 0.4s ease; transition-delay: calc(var(--d) * 0.1s); } /* Custom Colors */ .instagram { color: var(--insta-color); border-color: var(--insta-color); } .facebook { color: var(--fb-color); border-color: var(--fb-color); } .twitter { color: var(--tw-color); border-color: var(--tw-color); } /* Hover Logic: Staggered Appearance */ .toggle-wrapper:hover .social-list { pointer-events: auto; } .toggle-wrapper:hover .social-btn { opacity: 1; transform: translateX(20px); /* Moves icons out to the right */ } /* Hover effect on individual buttons */ .social-btn:hover { transform: translateX(20px) translateY(-5px) !important; transition-delay: 0s !important; /* Remove delay when hovering locally */ }
1
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!