Introduction
Here we are going to create an amazing Hovering Share Button using HTML and CSS. This is a very useful project, as you can see this type of button on websites, and you can also use it on your website or make it for your practice.
Let’s start making this button with the help of HTML and CSS by following the simple code step by step to understand the basic concepts used in the coding of this project. No matter if you are a beginner or an experienced guy, everyone can understand this in an easy way.
HTML
First, we will create the structure of the hovering share button with the help of HTML. In this first step, we will make a parent div in which there will be content for the button. Now in the button, first we will make a logo of Share in the anchor tag and then text in the span tag. Then we will make some logos for sharing anything, like Facebook, Instagram, or Twitter, and link in the anchor tag to go to that link for sharing.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<body>
<div class="share-button">
<span><i class="fas fa-share-alt"></i> Share!</span>
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</body>
</html>
CSS
After making the structure of the hovering card, we will now give it some styling to make the look of the button beautiful and attractive with the help of CSS (an external stylesheet attached to the HTML file). In this first step, we will make the background black, and then we will come to the button section.
body{
margin: 0;
padding: 0;
font-family: "montserrat",sans-serif;
background: #0a0a0a;
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.share-button{
width: 280px;
height: 80px;
background: #dfe6e9;
border-radius: 40px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
cursor: pointer;
transition: .3s linear;
}
.share-button:hover{
transform: scale(1.1);
}
.share-button span{
position: absolute;
width: 100%;
height: 100%;
background: #ff05f3;
color: #f1f1f1;
text-align: center;
line-height: 80px;
z-index: 999;
transition: .6s linear;
border-radius: 40px;
}
.share-button:hover span{
transform: translateX(-100%);
transition-delay: .3s;
background-color: rgb(255, 157, 0);
}
.share-button a{
flex: 1;
font-size: 26px;
color: #2d3436;
text-align: center;
transform: translateX(-100%);
opacity: 0;
transition: 0.3s linear;
}
.share-button:hover a{
opacity: 1;
transform: translateX(0);
}
.share-button a:nth-of-type(1){
transition-delay: 1s;
}
.share-button a:nth-of-type(2){
transition-delay: 0.8s;
}
.share-button a:nth-of-type(3){
transition-delay: 0.6s;
}
.share-button a:nth-of-type(4){
transition-delay: 0.4s;
}
In which first we will make the background red of the button in default case and will adjust the size and positions of the button, like giving display flex to the logos and it’s content. We will hide the sharing components in the default case, and when the user hovers on the button, the background will change and logos will appear with some transitions. When the user moves the mouse from the button, that button will be in its default situation.
Finally, we made the hovering share button with the help of HTML and CSS and some easy steps. If you want the source code, then click on the button given below to download the code.
For more explanation, click on the link given below to watch the video.
