ads_header

Home HTML CSS Create Sliding Social Media Button HTML CSS VIEWS

Create Sliding Social Media Button HTML CSS

October 01, 2018
Read
Sliding Social Media Button HTML CSS


Preview


Hello guys, this tutorial is to create a "Sliding Effect" on social media buttons using font awesome. This tutorial is certainly very interesting for those of you who like animation effects. So if you apply it to your website, it will add to the good experience of the users and of course your website will be recommended by other users.





Okey, first create a project folder and enter it in the index.html and style.css files. When finished, open index.html and enter the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sliding Social Media</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    rel="stylesheet">
</head>
<body>
    <ul>
        <li>
            <a href="#">
                <i class="fa fa-facebook" aria-hidden="true"></i>
                <i class="fa fa-facebook" aria-hidden="true"></i>
            </a>
        </li>

        <li>
            <a href="#">
                <i class="fa fa-twitter" aria-hidden="true"></i>
                <i class="fa fa-twitter" aria-hidden="true"></i>
            </a>
        </li>

        <li>
            <a href="#">
                <i class="fa fa-instagram" aria-hidden="true"></i>
                <i class="fa fa-instagram" aria-hidden="true"></i>
            </a>
        </li>

        <li>
            <a href="#">
                <i class="fa fa-linkedin" aria-hidden="true"></i>
                <i class="fa fa-linkedin" aria-hidden="true"></i>
            </a>
        </li>

        <li>
            <a href="#">
                <i class="fa fa-google-plus" aria-hidden="true"></i>
                <i class="fa fa-google-plus" aria-hidden="true"></i>
            </a>
        </li>
    </ul>
</body>
</html>

You can add more buttons, because it's just an example, so I just added 4 buttons. Now, open style.css and enter the following code

body{
    margin: 0;
    padding: 0;
}

ul{
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
}

ul li{
    list-style: none;
    margin: 0 5px;
    display: inline-block;
}

ul li a{
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    transition: .5s;
    background: #f1f1f1;
    overflow: hidden;
}

ul li a i{
    display: block;
    width: 100%;
    color: #777;
    transition: .5s;
}

ul li:hover a i:nth-child(1){
    transform: translateY(-50px);
}

ul li:hover a i:nth-child(2){
    transform: translateY(-50px);
    color: #fff;
}

ul li:hover:nth-child(1) a{
    background: #3b5998;
}

ul li:hover:nth-child(2) a{
    background: #00aced;
}

ul li:hover:nth-child(3) a{
    background: #bc2a8d;
}

ul li:hover:nth-child(4) a{
    background: #007bb6;
}

ul li:hover:nth-child(5) a{
    background: #dd4b39;
}

Save all files and run index.html
Tags :
Powered by Blogger.