Hello, guys in this tutorial we will create an animated share button using HTML & CSS, and also i have listed best social share button examples which is are available in codepen.
Button are the most important user interface component for any website. it’s important to style the buttons during a creatively unique way. The text-reveal effect for a button is used when it’s used to reveal some offer or exciting content for enhancing the user experience.
Approach: The approach is to cover the button with a strip of the same dimension as of button and then moving it to anyone direction on mouse-hover.
How to create animated share button using HTML & CSS
Step 1 — Creating a New Project
The first thing we’ll do is create a folder that will contain all of the files that make up the project. Create an empty folder on your devices and name it “as you want”.
Open up Visual Studio Code or any Text editor which is you liked, and create files(index.html, style.css) inside the folder which you have created for social share button. In the next step, we will start creating the basic structure of the webpage.
Step 2 — Setting Up the basic structure
In this step, we will add the HTML code to create the basic structure of the project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Animated Share Button</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
</body>
</html>
This is the base structure of most web pages that use HTML.
Add the following code inside the <body> tag:
<div class="animated_share">
<div class="animated_share_btn">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
</div>
</div>
Step 3 — Adding Styles for the Classes
In this step, we will add CSS code for style our html elements.
* {
padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.animated_share {
position: relative;
}
.animated_share_btn {
padding: 15px;
cursor: pointer;
border: 1px solid #4b00ff;
position: relative;
}
.animated_share_btn a {
font-size: 18px;
padding: 5px;
color: #4b00ff;
}
.animated_share_btn:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #4b00ff;
transition: 0.5s ease-in-out;
}
.animated_share_btn:after {
content: "Share";
position: absolute;
left: 0;
top: 0;
color: #fff;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
transition: 0.5s ease-in-out;
}
.animated_share_btn:hover:before,
.animated_share_btn:hover:after {
left: -100%;
}
#Final Result
Best Collection of Social Share Button
#1 Animated Social Share Button
Animated Social Share Button, which was developed by Rob Vermeer. Moreover, you can customize it according to your wish and need.
| Author: | Rob Vermeer |
| Created on: | April 15, 2016 |
| Made with: | HTML, CSS(SCSS) & JS |
| Demo Link: | Source Code / Demo |
| Tags: | Animated Social Share Button |
#2 Share Button with smooth slide effect
Share Button with smooth slide effect, which was developed by Yancy Min. Moreover, you can customize it according to your wish and need.
| Author: | Yancy Min |
| Created on: | August 6, 2018 |
| Made with: | HTML & CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Share Button with smooth slide effect |
#3 Awesome Share Button
Awesome Share Button, which was developed by Matthew Juggins. Moreover, you can customize it according to your wish and need.
| Author: | Matthew Juggins |
| Created on: | September 16, 2016 |
| Made with: | HTML, CSS(SCSS) & JS |
| Demo Link: | Source Code / Demo |
| Tags: | Awesome Share Button |
#4 Social Share Menu Button
Social Share Menu Button, which was developed by Aaron Raff. Moreover, you can customize it according to your wish and need.
| Author: | Aaron Raff |
| Created on: | March 30, 2016 |
| Made with: | HTML, CSS & JS |
| Demo Link: | Source Code / Demo |
| Tags: | Social Share Menu Button |
#5 HTML Social share button
HTML Social share button, which was developed by Kirill Kiyutin. Moreover, you can customize it according to your wish and need.
| Author: | Kirill Kiyutin |
| Created on: | April 5, 2016 |
| Made with: | HTML(Pug) & CSS(Sass) |
| Demo Link: | Source Code / Demo |
| Tags: | HTML Social share button |
#6 Social media share buttons html
Social media share buttons html, which was developed by Marko. Moreover, you can customize it according to your wish and need.
| Author: | Marko |
| Created on: | March 2, 2017 |
| Made with: | HTML(Haml) & CSS(SCSS) |
| Demo Link: | Source Code / Demo |
| Tags: | Social media share buttons html |
#7 facebook/instagram share button
facebook/instagram share button, which was developed by Nicolas Culotta. Moreover, you can customize it according to your wish and need.
| Author: | Nicolas Culotta |
| Created on: | September 5, 2018 |
| Made with: | HTML & CSS(SCSS) |
| Demo Link: | Source Code / Demo |
| Tags: | facebook/instagram share button |
#8 Social share buttons html code
Social share buttons html code, which was developed by alphardex. Moreover, you can customize it according to your wish and need.
| Author: | alphardex |
| Created on: | January 31, 2020 |
| Made with: | HTML & CSS(SCSS) |
| Demo Link: | Source Code / Demo |
| Tags: | Social share buttons html code |
#9 html share button mobile
html share button mobile, which was developed by adobewordpress. Moreover, you can customize it according to your wish and need.
| Author: | adobewordpress |
| Created on: | March 15, 2016 |
| Made with: | HTML, CSS & JS |
| Demo Link: | Source Code / Demo |
| Tags: | html share button mobile |
#10 Social button with Gooey Effect
Social button with Gooey Effect, which was developed by Vishal Prajapati. Moreover, you can customize it according to your wish and need.
| Author: | Vishal Prajapati |
| Created on: | February 11, 2016 |
| Made with: | HTML & CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Social button with Gooey Effect |
#11 Sticky Social Share Button Bar
Sticky Social Share Button Bar, which was developed by vavik. Moreover, you can customize it according to your wish and need.
| Author: | vavik |
| Created on: | November 20, 2015 |
| Made with: | HTML & CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Sticky Social Share Button Bar |
#12 Share Button Animation – Dribbble Shot
Share Button Animation, which was developed by Kitsune. Moreover, you can customize it according to your wish and need.
| Author: | Kitsune |
| Created on: | August 31, 2016 |
| Made with: | HTML, CSS & JS |
| Demo Link: | Source Code / Demo |
| Tags: | Share Button Animation |
#13 Dynamic Share Button
Dynamic Share Button, which was developed by MC. Moreover, you can customize it according to your wish and need.
| Author: | MC |
| Created on: | June 6, 2017 |
| Made with: | HTML & CSS(SCSS) |
| Demo Link: | Source Code / Demo |
| Tags: | Dynamic Share Button |
#14 Social Share Button Popover
Social Share Button Popover, which was developed by vabhishek.me. Moreover, you can customize it according to your wish and need.
| Author: | vabhishek.me |
| Created on: | March 18, 2016 |
| Made with: | HTML & CSS |
| Demo Link: | Source Code / Demo |
| Tags: | Social Share Button Popover |
#15 Simple Social Share Button
Simple Social Share Button, which was developed by Leena Lavanya. Moreover, you can customize it according to your wish and need.
| Author: | Leena Lavanya |
| Created on: | February 25, 2016 |
| Made with: | HTML, CSS & JS |
| Demo Link: | Source Code / Demo |
| Tags: | Simple Social Share Button |
#16 Simple pop up social share button
Simple pop up social share button, which was developed by Kevin Bertram. Moreover, you can customize it according to your wish and need.
| Author: | Kevin Bertram |
| Created on: | July 6, 2015 |
| Made with: | HTML, CSS(SCSS) & JS |
| Demo Link: | Source Code / Demo |
| Tags: | pop up social share button |
#17 Pure CSS Social share button
Pure CSS Social share button, which was developed by Daniela. Moreover, you can customize it according to your wish and need.
| Author: | Daniela |
| Created on: | January 15, 2017 |
| Made with: | HTML & CSS(SCSS) |
| Demo Link: | Source Code / Demo |
| Tags: | Pure CSS Social share button |
If you liked this article Html Share Button Examples, you should check out this one Html Toggle Switch Examples.
Very super design usefull thanks