Hello readers, welcome to my other blog, today in this blog I'm going to create an Animated Share Button with help of HTML & CSS only. In a previous blog, I have shared How to Create a Website in HTML & CSS and I'm going to create an animated share button.
Simply we can understand that share button means a button on the screen which help user to send images, videos, music to the friends through the social media. There may be any social media like Facebook, Twitter, Instagram, YouTube, and others. Nowadays share buttons are used the maximum website and mobile app to make user's sharing convenient.
As you can see on the given image of the share button with social media icons on the webpage. Actually, in the first in this program[Animated Share Button], there is only one button on the screen, when that button is clicked upper tooltip appears with these four social media icons with smooth sliding animation from top to button which really awesome. When this social media button hovered three colors are changed into the original color and these icons move a little upside.
Friend if you know basic HTML and CSS then you can easily make this program[Animated Share Button], or if you have knowledge of JavaScript you can add more functions to this program as you like. Those my friend who are feeling difficulty to create this program, don't worry I have provided all source codes given below and this is free, you can use this program as your purpose.
--------------------------------------------------------------------------------------------------------------------------------
HTML CODE.
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
</head>
<body>
<div class="mainbox">
<input type="checkbox" id="check">
<label for="check">Share</label>
<div class="media-icons">
<a href="#"><i class="fab fa-facebook"></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-youtube"></i></a>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------
CSS CODE.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #0984e3
}
.mainbox {
position: absolute;
left: 50%;
top: 60%;
transform: translate(-50%, -50%);
}
label {
position: relative;
background: #fff;
height: 50px;
width: 150px;
border-radius: 35px;
line-height: 50px;
text-align: center;
font-size: 22px;
font-weight: 500;
text-transform: uppercase;
display: block;
color: #0984e3;
cursor: pointer;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
label:hover {
letter-spacing: 1px;
}
label::before {
content: 'Cancel';
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: #fff;
border-radius: 35px;
opacity: 0;
}
#check {
display: none;
}
#check:checked~label::before {
opacity: 1;
}
.media-icons {
position: absolute;
left: 50%;
top: -120px;
transform: translateX(-50%);
background: #fff;
width: 140%;
height: 110%;
text-align: center;
display: flex;
align-items: center;
justify-content: space-evenly;
border-radius: 35px;
padding: 4px;
z-index: 1;
opacity: 0;
pointer-events: none;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
#check:checked~.media-icons {
opacity: 1;
pointer-events: auto;
top: -84px;
}
.media-icons::before {
content: '';
width: 18px;
height: 18px;
position: absolute;
left: 50%;
background: #fff;
bottom: -9px;
transform: translateX(-50%) rotate(45deg);
z-index: -1;
}
.media-icons a {
font-size: 22px;
color: #0984e3;
transition: all 0.3s ease;
}
.media-icons a:hover {
transform: translateY(-2px);
}
.media-icons a:nth-child(1):hover {
color: #426782;
}
.media-icons a:nth-child(2):hover {
color: #1da1f2;
}
.media-icons a:nth-child(3):hover {
color: #e1306c;
}
.media-icons a:nth-child(4):hover {
color: #ff0000;
}
--------------------------------------------------------------------------------------------------------------------------------
OUT-PUT.
google digital-unlocked-certificate.
certificate of brilliance.
0 Comments