Social Media Icons using HTML CSS | TopUniqueCoding

byTopUniqueCoding -
0

Social Media Icons using HTML CSS | TopUniqueCoding





Hello Friends, Today in this blog you’ll learn how to create 3D Social Media Buttons using HTML & CSS.  The Social Media Links and Buttons let your website visitors and content viewers to easily share your content with their preferred social media connections and networks. Adding these buttons or links to your content allows you to expand the reach of your content to new audiences and make new visitors back to your website. In this program (3D Social Media Buttons), on the webpage, there are many different social media networks buttons – Facebook, Twitter, Instagram, and YouTube with their icon or logo and when you click on a particular button, the button is clicked with 3D visualization which makes these buttons more attractive. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (3D Effect on Social Media Buttons).



3D Social Media Buttons [Source Codes]

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/6.2.1/css/all.min.css">
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <ul>
     <li style="--i:6;--clr:#1da1f2;">
        <a href="#">
            <span>
                <i class="fa-brands fa-facebook-f"></i>
            </span>
            Facebook
        </a>
    </li>
    <li style="--i:5;--clr:#25d366;">
        <a href="#">
            <span>
                <i class="fa-brands fa-instagram"></i>
            </span>
            Instagram
        </a>
    </li>
    <li style="--i:4;--clr:#1877f2;">
        <a href="#">
            <span>
                <i class="fa-brands fa-twitter"></i>
            </span>
            Twitter
        </a>
    </li>
    <li style="--i:3;--clr:#c32aa3;">
        <a href="#">
            <span>
                <i class="fa-brands fa-whatsapp"></i>
            </span>
            Whatsapp
        </a>
    </li>
    <li style="--i:2;--clr:#ff0000;">
        <a href="#">
            <span>
                <i class="fa-brands fa-youtube"></i>
            </span>
            Youtube
        </a>
    </li>
    <li style="--i:1;--clr:#0a66c2;">
        <a href="#">
            <span>
                <i class="fa-brands fa-linkedin"></i>
            </span>
            Linkedin
        </a>
    </li>
    </ul>
   
</body>
</html>

Second, create an HTML file with the name of Style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .CSS extension.

body{
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   background: #434750;
}
div{
    display: flex;
    justify-content:space-evenly;
    width: 100%;
}
ul{
    position: relative;
    transform: skewY(-15deg);
}
ul li{
    position: relative;
    list-style: none;
    width: 120px;
    background: #3e3f46;
    padding: 15px;
    transition: 0.5s;
    z-index: calc(1 * var(--i));
}
ul li:hover{
    transform: translateX(-50px);
    background: var(--clr);
}
ul li::before{
    content: "";
    position: absolute;
    top: 0;
    left: -40px;
    width: 40px;
    height: 100%;
    background: #3e3f46;
    filter: brightness(0.7);
    transform-origin: right;
    transform: skewY(45deg);
}
ul li:hover::before{
    background: var(--clr);
    filter: brightness(0.7);
}
ul li::after{
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: 40px;
    background: #3e3f46;
    filter: brightness(0.9);
    transform-origin: bottom;
    transform: skewX(45deg);
    transition: 0.5s;
}
ul li:hover::after{
    background: var(--clr);
    filter: brightness(0.9);
}
ul li a{
    text-decoration: none;
    color: #999;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: 0.5s;
}
ul li:hover a{
    color: #fff;
}
ul li:last-child::after{
    box-shadow: -120px 120px 20px rgba(0, 0, 0, 0.24);
}
ul li span{
    position: absolute;
    top: 0;
    left: -40px;
    width: 40px;
    height: 100%;
    filter: brightness(0.7);
    transform-origin: right;
    transform: skewY(45deg);
    transition: 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.5;
    font-size: 1.25em;
}
ul li:hover span{
    opacity: 1;
}







Tags:

Post a Comment

Previous Post Next Post