Using the effects that are executed during the hover makes the user feel better about the interactivity of the website and your website stays in the user's memory better. In this code, a social button is placed horizontally next to each other. These buttons have an orange theme. Placing the mouse cursor on one of the buttons creates a recess for the button. The color of the icons on each button is also orange.
HTML
<!-- This script got from www.devanswer.com -->
<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>
CSS
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;
}
