socialMediaIcons.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
<div class="Contact-us">
<span>Join with us</span>
<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-linkedin-in"></i></a>
</div>
</body>
</html>
style.css
body{
background-color: rgb(51, 49,49);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.Contact-us{
position: relative;
width: 250px;
height: 80px;
background-color: #8bcae9;
border-radius: 40px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 40px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 0 10px #33ffffff,0 0 10px #66ffffff;
transition: 0.5s;
}
.Contact-us span{
position: absolute;
z-index: 9;
width: 100%;
height: 100%;
text-align: center;
line-height: 80px;
background: rgb(40, 146, 146);
transition: 0.6s;
color: #f1f1f1;
font-weight: 600;
border-radius: 40px;
}
.Contact-us:hover span{
transform: translateX(-100%);
transition-delay: 0.2s;
}
.Contact-us a{
opacity: 0;
font-size: 25px;
margin-right: 30px;
color: white;
text-align: center;
transform: translateX(-100%);
transition: 0.3s;
}
.Contact-us:hover a{
opacity: 1;
transform: translateX(0);
}
.Contact-us a:nth-of-type(1){
transition-delay: 1s;
}
.Contact-us a:nth-of-type(2){
transition-delay: .8s;
}
.Contact-us a:nth-of-type(3){
transition-delay: .6s;
}
.Contact-us a:nth-of-type(4){
transition-delay: .4s;
}
.fa-facebook:hover{
color:#3b5998;
transition: 0.4s;
transform: rotate(360deg);
}
.fa-twitter:hover{
color:#00acee;
transition: 0.4s linear;
transform: scale(1.5);
}
.fa-instagram:hover{
color:#fe4164;
transition: 0.4s;
transform: rotate(360deg);
}
.fa-linkedin-in:hover{
color:#0e76a8;
transition: 0.4s linear;
transform: scale(1.5);
}
View when code execute
On Hover Join With us
On hover Instagram Icon
On Hover Twitter Icon
On Hover Facebook Icon
On Hover the LinkedIn Icon
Video Link
Check out my YouTube channel for more such videos :
https://www.youtube.com/channel/UCrgTxZY_mtmFV0EpHeaRezg?view_as=subscriber
Follow me on my facebook page:
https://www.facebook.com/Coding-Zone-101009098243029/?modal=admin_todo_tour
Post a Comment