Demo for Social Buttons Code with Dip Effect on Hover

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
body{
    background: rgb(232, 102, 1);
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
   padding-top:6%;
    height: 100%;
    vertical-align: center;
  align-items:center;
}
.container ul li {
    width:150px;
    text-align: center;
    vertical-align: middle;
    height:150px;
    display: inline-block;
    text-decoration: none;
    text-decoration: none;
    border-radius: 41px;
    background: #fe8a50;
    box-shadow:  10px -10px 20px #b5460f, 
    -10px 10px 20px #ff6e17;
    margin: 15px;
}
.container ul li:hover{
    background: #e85a13;
    box-shadow: inset -10px 10px 20px #b5460f, 
    inset 10px -10px 20px #ff6e17;
transition:  background 1s;

}
.container ul li i {
    olor: #fff;
    font-size: 35px;
    padding-top: 55px;
}
</style>

</head>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
    <ul>
        <li><i class="fa fa-facebook"></i></li>
        <li><i class="fa fa-instagram"></i></li>
        <li><i class="fa fa-vimeo"></i></li>
        <li><i class="fa fa-google"></i></li>
        <li><i class="fa fa-linkedin"></i></li>
    </ul>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
</html>

Other Codes

Show / Hide HTML Social Buttons on Hover

First there is a button to share. This button is displayed in Hover mode and then becomes shared buttons with their icons.

Social Buttons Code with Counter on Hover

In this post, the social buttons are square and in hover mode, the number of likes or followers is shown. In addition, the background color of the buttons . . .

HTML Dynamic Social Buttons with Hover Effect

In this post, we have some social buttons in dark gray. During the hover, these buttons first have a circular background and then a square background.

Social Sharing Buttons Code with Shadow

In this post, we have some social buttons that are dormant or pressed. By placing the mouse on these buttons, these buttons are displayed completely and . . .