Hidden Social Media Share Buttons

Developer
Michael Lee
Size
3,795 Kb
Views
14,168
  1. Hidden Social Media Share Buttons Previews
  2. Hidden Social Media Share Buttons HTML Codes
  3. Hidden Social Media Share Buttons CSS Codes
  4. Hidden Social Media Share Buttons JS Codes

How do I make an hidden social media share buttons?

Experimenting with a share section for a blog I'm building. Took inspiration from Dribbble's share feature.. What is a hidden social media share buttons? How do you make a hidden social media share buttons? This script and codes were developed by Michael Lee on 20 January 2023, Friday.

Hidden Social Media Share Buttons Previews
IQ Test

Hidden Social Media Share Buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hidden Social Media Share Buttons</title> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article class="Post"> <header class="Post-header"> <h1>Who Stabbed Royal Tennenbaum?</h1> </header> <div class="Post-entry"> <p><em>Royal:</em> He saved my life, you know. Thirty years ago. I was knifed at a bazaar in Calcutta, and he carried me to the hospital on his back.</p> <p><em>Ari:</em> Who stabbed you?</p> <p><em>[Royal motions to Pagoda again]</em></p> <p><em>Royal:</em> He did. There was a price on my head, and he was a hired assassin. Stuck me in the gut with a shiv.</p> </div> <footer class="Post-footer"> <label for="share-icon" class="Share-icon fa fa-share"></label> <input type="checkbox" id="share-icon" /> <div class="Post-share"> <div class="Share-buttons"> <a href="javascript:;" class="fa fa-twitter"></a> <a href="javascript:;" class="fa fa-facebook"></a> <a href="javascript:;" class="fa fa-pinterest"></a> <a href="javascript:;" class="fa fa-google-plus"></a> </div> </div> </footer>
</article>
<div class="Meta">Hidden Share Dropdown<br />by<br /><a href="http://michaellee.co">Michael Lee</a><br /><a href="https://twitter.com/hellomichaellee">@hellomichaellee</a></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hidden Social Media Share Buttons - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Varela+Round);
body { background: #1abc9c; color: #fff; font-family: 'Varela Round', sans-serif; line-height: 1.5rem;
}
a { color: #fff; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #18aa8d; -webkit-transition: border 0.5s ease; -moz-transition: border 0.5s ease; transition: border 0.5s ease;
}
a:hover { border-bottom: 1px solid #169d82;
}
.Meta { text-align: center; margin: 0 auto; width: 600px;
}
.Post { margin: 0 auto; padding: 2rem 0; width: 600px;
}
.Post-header { border-bottom: 1px solid #169d82; margin-bottom: 2rem;
}
.Post-header h1 { margin-bottom: 2rem;
}
.Post-entry { padding: 0 0 1rem;
}
.Post-footer { border-top: 1px solid #169d82; position: relative;
}
.Share-icon { font-size: 0.875em; position: absolute; display: block; height: 28px; width: 28px; margin: auto; left: 0; right: 0; top: -15px; background: #1abc9c; color: #169d82; border: 1px solid #169d82; line-height: 28px; text-align: center; cursor: pointer; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%;
}
.Post-share { display: block; height: 0; overflow: hidden; background: #169d82; text-align: center; -webkit-transition: height 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: height 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: height 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.Post-share a { height: 12px; width: 12px; padding: 10px; text-decoration: none; text-align: center; line-height: 12px; display: inline-block; margin: 0 4px; color: #169d82; background: #117d68; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; transition: background 0.5s ease;
}
.Post-share a.fa-facebook:hover { background: #3B5998;
}
.Post-share a.fa-twitter:hover { background: #00aced;
}
.Post-share a.fa-google-plus:hover { background: #dd4b39;
}
.Post-share a.fa-pinterest:hover { background: #cb2027;
}
.Share-buttons { padding: 12px;
}
#share-icon { display: none; position: fixed;
}
#share-icon:checked ~ .Post-share { height: 56px;
}

Hidden Social Media Share Buttons - Script Codes JS Codes

/* Hidden Share Dropdown michaellee / 2014-02-26 https://www.twitter.com/hellomichaellee
*/
Hidden Social Media Share Buttons - Script Codes
Hidden Social Media Share Buttons - Script Codes
Home Page Home
Developer Michael Lee
Username michaellee
Uploaded January 20, 2023
Rating 4
Size 3,795 Kb
Views 14,168
Do you need developer help for Hidden Social Media Share Buttons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Michael Lee (michaellee) Script Codes
Name
Animated CSS Poly Drop
Breathing Giphy Logo
Rotating Button
Stop Using Corner Banners
Profile background and color changer prototype for CodeHive
X Mobile Menu
Responsive C3.js chart
Mountains Illustration
My Daily Routine Visualized
Illustrated CSS Switch
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!