<!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 icons</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css?_cacheOverride=1632120433826" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer">
</head>
<body>
    <div class="wrapper">
        <div class="button">
            <div class="icon">
                <i class="fab fa-facebook-f"></i>
            </div>
            <span>facebook</span>
        </div>

        <div class="button">
            <div class="icon">
                <i class="fab fa-instagram"></i>
            </div>
            <span>instagram</span>
        </div>

        <div class="button">
            <div class="icon">
                <i class="fab fa-twitter"></i>
            </div>
            <span>twiter</span>
        </div>

        <div class="button">
            <div class="icon">
                <i class="fab fa-youtube"></i>
            </div>
            <span>youtube</span>
        </div>
    </div>
</body>
</html>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}


html,body{

    display: grid;
    place-items: center;
    background: #ebf5f9;
    width: 100%;
    height: 100%;
    min-height: 100vh;
}

.wrapper .button{
    display: block;
    height: 4em;
    width: 4em;
    float: left;
    margin: 0 0.5em;
    background:#fff;
    border-radius: 0.5em;
    cursor: pointer;
    box-shadow: -2px -2px 5px rgba(255,255,255,1),
                 3px 3px 5px rgba(0,0,0,0.1);
    transition: .5s all ease-out;
    overflow: hidden;
    
}


.wrapper .button .icon{
    display: inline-block;
    height: 4em;
    width: 4em;
    border-radius: 50%;
    box-sizing: border-box;
    line-height: 1em;
    text-align: center;
    transition: .5s all ease-out;
}

.wrapper .button .icon i{
    font-size: 1.5em;
    line-height: 2.5em;
    
}

.wrapper .button span{
    font-size: 1.2em;
    font-weight: 500;
    line-height: 2.2em;
    margin-left: 1.6em;
   text-transform: capitalize;
   transition: .5s all ease-out;
   transform: scale(0.98);
    
}

.wrapper .button:hover{
    width: 13em;

}


.wrapper .button:nth-child(1):hover .icon{
    background: #4267B2;
    transform: scale(1.5);
}

.wrapper .button:nth-child(2):hover .icon{
    background: #E1306C;
    transform: scale(1.5);
}

.wrapper .button:nth-child(3):hover .icon{
    background: #1DA1F2;
    transform: scale(1.5);
}

.wrapper .button:nth-child(4):hover .icon{
    background: #ff0000;
    transform: scale(1.5);
}


.wrapper .button:hover .icon i{
    color: #fff;
}


.wrapper .button:nth-child(1) span{
    color: #4267B2;
}

.wrapper .button:nth-child(2) span{
    color: #E1306C;
}

.wrapper .button:nth-child(3) span{
    color: #1DA1F2;
}

.wrapper .button:nth-child(4) span{
    color: #ff0000;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.