darkcode

Web Design and Web Development Tutorials

Post Page Advertisement [Top]

 


Hello everyone, In this blog post you will learn how to create an amazing social media buttons for your website with awesome hover effect using only html and css.


HTML CODE:

<!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>Social Media Buttons</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="social-media-container">
        <h2>Follow Us On</h2>
        <div class="border"></div>
        <div class="social-media-buttons">
            <a href="#"><i class="fab fa-facebook-f"></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>
            <a href="#"><i class="fab fa-tiktok"></i></a>
        </div>
    </div>
</body>
</html>


CSS CODE:

body{
    margin: 0;
    padding: 0;
    background-color: #D6CDEA;
    height: 100vh;
    font-family: "Montserrat", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-media-container{
    display: flex;
    align-items: center;
    gap: 20px;
}

.social-media-container h2{
    color: #2e3749;
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
}

.border{
    width: 120px;
    height: 3px;
    position: relative;
}

.border::before{
    content: "";
    position: absolute;
    height: 3px;
    width: 40px;
    background-color: #2e3749;
    transition: .3s linear;
}

.social-media-container:hover .border::before{
    width: 100%;
}

.social-media-buttons a{
    display: inline-block;
    color: #2e3749;
    font-size: 24px;
    margin-right: 20px;
    pointer-events: none;
    transition: .5s;
    opacity: 0;
}

.social-media-buttons a:nth-child(odd){
    transform: translateY(-40px);
}

.social-media-buttons a:nth-child(even){
    transform: translateY(40px);
}

.social-media-container:hover .social-media-buttons a{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.social-media-buttons a i{
    transition: .2s linear;
}

.fa-facebook-f:hover{
    color: #1b74e4;
}

.fa-twitter:hover{
    color: #1da1f2;
}

.fa-instagram:hover{
    color: #c32aa3;
}

.fa-linkedin-in:hover{
    color: #0a66c2;
}

.fa-tiktok:hover{
    color: #010101;
}


3 comments:

Subscribe to: Post Comments (Atom)

Bottom Ad [Post Page]

Copyright 2021, darkcode. All rights Reserved.