Professional design Share Button Icon for your Website

4

How to create professional design share button icon?

Choose your best code editor create share button icon, Now i am using Visual Studio Code Editor , if you did’t have any code editor use notepad or Download Visual Studio Code Editor Now

Step 1:

Open Visual Studio Code Editor and Create new file index.html and style.css

Step 2: Type the html code in index.html

Open Visual Studio Code Editor and Create new file index.html and style.css

<!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://use.fontawesome.com/releases/v5.4.1/css/all.css”>
</head>
<body>
<div class=”middle”>
<a class=”btn” href=”#”>
<i class=”fab fa-facebook-f”></i>
</a>
<a class=”btn” href=”#”>
<i class=”fab fa-twitter”></i>
</a>
<a class=”btn” href=”#”>
<i class=”fab fa-google”></i>
</a>
<a class=”btn” href=”#”>
<i class=”fab fa-instagram”></i>
</a>
<a class=”btn” href=”#”>
<i class=”fab fa-youtube”></i>
</a>
</div>
</body>
</html>

Step 3: Type the CSS code in style.css

body{
padding: 0;
margin: 0;
}
.middle{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}
.btn{
display: inline-block;
width: 90px;
height: 90px;
background: #f1f1f1;
margin: 10px;
border-radius: 30%;
box-shadow: 0 5px 15px -5px #00000070;
color: #3498db;
overflow: hidden;
position: relative;
}
.btn i{
line-height: 90px;
font-size: 26px;
transition: 0.2s linear;
}
.btn:hover i{
transform: scale(1.3);
color: #f1f1f1;
}
.btn::before{
content: “”;
position: absolute;
width: 120%;
height: 120%;
background: #3498db;
transform: rotate(45deg);
left: -110%;
top: 90%;
}
.btn:hover::before{
animation: aaa 0.7s 1;
top: -10%;
left: -10%;
}
@keyframes aaa {
0%{
left: -110%;
top: 90%;
}50%{
left: 10%;
top: -30%;
}100%{
top: -10%;
left: -10%;
}
}

Step 4: Finally Save both the file

Now open the index.html file via any web browers(ex: chrome, IE, Firefox, etc.,)

Step 5: Share Button Design Output

Leave A Reply

Your email address will not be published.