ADVERTISEMENT

Create Share Button Using HTML & CSS

Telegram Group Join Now

ADVERTISEMENT

Create Share Button Using HTML & CSS

 
 
Share Button Using HTML & CSS
Share Button Using HTML & CSS

 

ADVERTISEMENT

ADVERTISEMENT

Welcome to the Codewithrandom blog. In this blog, We learn how to create a Share Button. We use HTML and CSS  for this Share Button.

I hope you enjoy our blog so let’s start with a basic Html Structure for Share Button.

ADVERTISEMENT

HTML Code For Share Button

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Share Button</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
<input type="checkbox" name="" id="">
<div class="links">
<a href="#" style="--i:1"><i class="fab fa-facebook"></i></a>
<a href="#" style="--i:2"><i class="fab fa-instagram"></i></a>
<a href="#" style="--i:3"><i class="fab fa-twitter"></i></a>
<a href="#" style="--i:4"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
</body>
</html>

There is all the Html Code for the Share Button. Now, you can see output without Css Code, then we write Css for our Styling and give some animation in Share Button.

ADVERTISEMENT

Portfolio Website using HTML and CSS (Source Code)

Output.

 

ADVERTISEMENT

Share Button Using HTML & CSS

 

HTML Code For Share Button

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
width: 40px;
height: 40px;
position: relative;
}
.container input{
position: absolute;
width: 100%;
height: 100%;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.container input::before{
content: "\f1e0";
position: absolute;
font-family: 'Font Awesome 6 Free';
font-weight: 700;
font-size: 1.5rem;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #9733EE;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.container input:checked::before{
content: "\f00d";
font-size: 2rem;
}
.container input::after{
content: "";
position: absolute;
top: -35%;
left: -35%;
width: 120%;
height: 120%;
z-index: -10;
border: 10px solid #9733EE;
box-shadow: 0 0 30px #9733ee4f;
border-radius: 0%;
transform: scale(.5);
transition: all .4s;
}
.container input:checked::after{
transform: scale(1.5);
border-radius: 50%;
}
.links{
position: absolute;
z-index: -10;
}
.container input:checked ~ .links{
transition: all 4s;
z-index: 50;
}
.links a{
position: absolute;
width: 40px;
height: 40px;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.226);
border-radius: 50%;
cursor: pointer;
color: white;
transition: all .4s;
transition-delay: calc(var(--i)* 0.1s);
backdrop-filter: blur(5px);
}
.links a i{
font-size: 1.5em;
}
.container input:checked ~ .links a:nth-child(1){
transform: translateY(-130%);
}
.container input:checked ~ .links a:nth-child(2){
transform: translateX(130%);
}
.container input:checked ~ .links a:nth-child(3){
transform: translateY(130%);
}
.container input:checked ~ .links a:nth-child(4){
transform: translateX(-130%);
}

Now we have completed our Share Button Using Css. Here is our updated output HTML + CSS.

50+ HTML, CSS & JavaScript Projects With Source Code

ADVERTISEMENT

Final Output Of Share Button Using HTML & CSS

ADVERTISEMENT

Share Button Using HTML & CSS

 

Share Button Using HTML & CSS

 

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

GitHub link of this Share Button👉 – Here
Now we have completed our Css section. Here is our updated output with Html and Css. Hope you like Share Button Project. Using CSS, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

ADVERTISEMENT

In this post, we learn how to Create a Share Button Using HTML and CSS. If we made a mistake or any confusion, please drop a comment to reply or help you learn quickly.

ADVERTISEMENT

Written by – Code With Random/Anki

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

0 thoughts on “Create Share Button Using HTML & CSS”

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT