Hello developers, today in this blog you will learn to create Popup Share Button using HTML & CSS.
Share button is clickable which is displayed on some of your websites to allow your website visitors to share your content with social networking profiles. Social media such as Facebook, Twitter, LinkedIn, etc., The share social button is used to share the website by clicking the button.
In this blog (Popup Share Button) on the webpage, there is a single button at the center of the webpage. When you click on the button, the upper tooltip appears with four social media icons such as Facebook, Twitter, Instagram, and Youtube. When you hover over the individual social media icons, the color of the icon changes to its original color, and the icons will move a little upside. You can use these buttons on your website, to share your details on the website for the visitors.
The source code of this project is given below, if you want the source code of this program, you can copy it. You can use these Popup Share Button with your creativity and, can take this project to the next level.
Popup Share Button [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html, and, remember, you have to make a file with a .html extension.
@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-color: lightgreen;
}
.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: #11998e;
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: 180%;
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: 15px;
height: 15px;
position: absolute;
left: 50%;
background: #fff;
bottom: -9px;
transform: translateX(-50%) rotate(45deg);
z-index: -1;
}
.media-icons a{
font-size: 30px;
color: #11998e;
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;
}
.credit a{
text-decoration: none;
font-weight: 800;
color: tomato;
}
.credit {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #000;
margin-top: 500px;
}
Thank you for reading our blog. If you face any problem in creating these Popup Share Button using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team