Create Some Social Media & Other Icons By HTML, CSS CODE
HTML Code:-
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Social Media Icons</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="wrapper">
<div class="button">
<font color="#4267B2"><div class="icon"><i class="fab fa-facebook-f"></font></i></div>
<span>Facebook</span>
</div>
<div class="button">
<font color="#1DA1F2"><div class="icon"><i class="fab fa-twitter"></font></i></div>
<span>Twitter</span>
</div>
<div class="button">
<font color="#8a3ab9"><div class="icon"><i class="fab fa-instagram"></font></i></div>
<span>Instagram</span>
</div>
<div class="button">
<font color="#0e76a8"><div class="icon"><i class="fab fa-linkedin"></font></i></div>
<span>Linkedin</span>
</div>
<div class="button">
<font color="#FF0000"><div class="icon"><i class="fab fa-youtube"></font></i></div>
<span>YouTube</span>
</div>
<div class="button">
<font color="#25D366"><div class="icon"><i class="fab fa-whatsapp"></font></i></div>
<span>Whatsapp</span>
</div>
<div class="button">
<font color="#0088cc"><div class="icon"><i class="fab fa-telegram"></font></i></div>
<span>Telegram</span>
</div>
<div class="button">
<font color="#E60023"><div class="icon"><i class="fab fa-pinterest"></font></i></div>
<span>Pinterest</span>
</div>
</body>
</html>
CSS Code:-
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'harlow solid';
}
html,body{
display: grid;
height: 100%;
width: 100%;
place-items: center;
background: url(https://images.unsplash.com/photo-1542451313056-b7c8e626645f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=282&q=80);
}
.wrapper .button{
display: inline-block;
height: 60px;
width: 60px;
float: left;
margin: 0 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease-out;
}
.wrapper .button:hover{
width: 200px;
}
.wrapper .button .icon{
display: inline-block;
height: 60px;
width: 60px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 60px;
transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1):hover .icon{
background: #4267B2;
}
.wrapper .button:nth-child(2):hover .icon{
background: #1DA1F2;
}
.wrapper .button:nth-child(3):hover .icon{
background:linear-gradient(45deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d);
}
.wrapper .button:nth-child(4):hover .icon{
background: #0e76a8;
}
.wrapper .button:nth-child(5):hover .icon{
background: #ff0000;
}
.wrapper .button:nth-child(6):hover .icon{
background: #25D366;
}
.wrapper .button:nth-child(7):hover .icon{
background: #0088cc;
}
.wrapper .button:nth-child(8):hover .icon{
background: #E60023;
}
.wrapper .button .icon i{
font-size: 50px;
line-height: 60px;
transition: all 0.3s ease-out;
}
.wrapper .button:hover .icon i{
color: #fff;
}
.wrapper .button span{
font-size: 20px;
font-weight: 500;
line-height: 60px;
margin-left: 10px;
transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1) span{
color: #4267B2;
}
.wrapper .button:nth-child(2) span{
color: #1DA1F2;
}
.wrapper .button:nth-child(3) span{
color: linear-gradient(45deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d);
}
.wrapper .button:nth-child(4) span{
color: #0e76a8;
}
.wrapper .button:nth-child(5) span{
color: #ff0000;
}
.wrapper .button:nth-child(6) span{
color: #25D366;
}
.wrapper .button:nth-child(7) span{
color: #0088cc;
}
.wrapper .button:nth-child(8) span{
color: #E60023;
}
OUTPUT:-
Posts
41 Comments
Awesome guys
ReplyDeleteGood Creation 👌👌👌👌👌
Very Very nice
ReplyDeleteAwesome
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteKallu
Superb quality and excellent work
ReplyDeleteAwesome
ReplyDeleteBrilliant
ReplyDeleteAttractive and very nice
ReplyDeleteVery Nice
ReplyDeleteFantastic job
ReplyDeleteFabulous idea
ReplyDeleteWonderful
ReplyDeleteExcellent
ReplyDeleteNice
ReplyDeleteSuper
ReplyDeleteWow ma'am superb ✌️✌️
ReplyDeleteAwesome
ReplyDeleteWonderful 😊😊😊
ReplyDeleteAmazing
ReplyDeleteNice Nicely done
ReplyDeleteWow Very Nice
ReplyDeleteNice Blog
ReplyDeletePerfect Lines
ReplyDeleteNice Logos
ReplyDeleteNice Social App
ReplyDeleteGood Codes For Apps
ReplyDeleteSuperb work with programming
ReplyDeleteBrilliant
ReplyDeleteAbsolutely good work
ReplyDeleteExcellent job
ReplyDeleteWonderful
ReplyDeleteAwesome Social media App Logo
ReplyDeleteSuperb
ReplyDeleteMind-Blowing
ReplyDeleteExcellent
ReplyDeleteSuper Quality Work
ReplyDeleteAwesome Work
ReplyDeleteSuper Quality Work
ReplyDeleteKya baat hai
ReplyDeleteStainless Steel Magnets - titanium arts
ReplyDeleteIroning the 토토사이트 Stainless Steel Magnets titanium ring (4-Pack). Made in Germany. ventureberg.com/ The Titanium Arts worrione.com Stainless https://septcasino.com/review/merit-casino/ Steel Magnets are an alloy made of steel in stainless steel