Skip to main content

Animated social media buttons


 HTML CODE:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/socialstyle.css">
    <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

</head>
<body>

<div class="sm">
    <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
    <a href="#"><i class="fa-brands fa-twitter"></i></a>
    <a href="#"><i class="fa-brands fa-instagram"></i></a>
    <a href="#"><i class="fa-brands fa-youtube"></i></a>
    <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
</div>
</body>
</html>

CSS CODE:

body{
    margin: 0;
    padding: 0;
    background-color: #136482;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

a{
    margin: 0 20px;
    width: 80px;
    height: 80px;
    background-color: #ccc;
    display: inline-block;
    border-radius: 24px;
    box-shadow: 6px 6px 12px rgba(0, 0, 0, .15),
                -6px -6px 12px rgba(255,255,255,.1);
    overflow: hidden;
    font-size: 28px;
    transition: .3s linear;
    position: relative;
}

a:hover{
    transform: scale(1.3);
    border-radius: 50%;
}

a i::before{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    background-size: 200% 200%;
    background-position: 75% 75%;
    top: 0;
    left: 0;
    line-height: 80px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background .5s linear;
}

a:hover i::before{
    background-position: 0% 0%;
}

.fa-facebook-f::before{
    background-image: linear-gradient(135deg,#3b5998 30%, #0a3d62 50%);
}

.fa-twitter::before{
    background-image: linear-gradient(135deg,#1da1f2 30%, #0a3d62 50%);
}

.fa-instagram::before{
    background-image: linear-gradient(135deg,#c32aa3 30%, #0a3d62 50%);
}

.fa-youtube::before{
    background-image: linear-gradient(135deg,#d71e18 30%, #0a3d62 50%);
}

.fa-linkedin-in::before{
    background-image: linear-gradient(135deg,#007bb5 30%, #0a3d62 50%);
}

Comments

Post a Comment

Popular posts from this blog

Crab animation

HTML CODE: <! DOCTYPE html > < html lang = "en" >   < head >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title > Crab CSS Animation </ title >     <!-- Stylesheet -->     < link rel = "stylesheet" href = "css/crab.css" />   </ head >   < body >     < div class = "container" >       < div class = "crab" >         < div class = "hand" >           < div class = "claw-1-l" ></ div >           < div class = "claw-1-r" ></ div >           < div class = "claw-2-l" ></ div >           < div class = "claw-2-r" ></ div >         </ div >         < div class = "mouth" ...
Post a Comment
Read more

Toggle animation using CSS!!!

HTML CODE: <! DOCTYPE html > < html > < head >     < meta charset = "utf-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1" >     < title > Toggle </ title >     < link rel = "stylesheet" href = "Toggle.css" > </ head > < body > < input type = "checkbox" id = "day-night" >< label for = "day-night" ></ label > < div class = "content" >         < div class = "moon-sun" ></ div >     < div class = "cuboid floor one" >         < div class = "side" ></ div >         < div class = "side" ></ div >         < div class = "side" ></ div >         < div class = "side" ></ div >         < div class = "side" ></ div >   ...
Post a Comment
Read more

Animated amongus !!!

HTML CODE: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Among Us </ title >     < link rel = "stylesheet" href = "amongus.css" > </ head > < body >     < div class = "player" >         < div class = "visor" ></ div >         < div class = "backpack" ></ div >         < div class = "leg front" ></ div >         < div class = "leg back" ></ div >         < div class = "shade" ></ div >     </ div > </ body > </ html > CSS CODE: html , body {     height : 100vh ; } body {     display : flex ;     align-items : center ; ...
Post a Comment
Read more