Advertisement
social icon shadow effect in css

Social Icon Shadow Effect Html Code

Advertisement
<head>      
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
 <div class="box">
            <div class="item"><i class="fa fa-whatsapp" style="font-size:36px"></i>
            <div class="item"><i class="fa fa-instagram" style="font-size:36px"></i>
                <div class="item"><i class="fa fa-twitter" style="font-size:36px"></i>
            </div>
        </div>

Social Icon Shadow Effect Css Code

Advertisement
       body{
            background-color: lightsteelblue;
        }
        .box{
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-content: center;
        }
        .box i{
            margin: 10px;
            background-color: white;
            border-radius: 7px;
            padding:5px;
            box-shadow: 3px 8px 10px rgba(2, 2, 2, 0.315), -3px -5px 8px rgba(255, 255, 255, 0.842);
        }
        .box i:hover{
            box-shadow: -3px -4px 10px rgba(2, 2, 2, 0.315);
        }