<!--
add this code in <head></head> section <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
-->
<div class="box">
<button><i class="fa fa-search"></i></button>
<button><i class="fa fa-user"></i></button>
<button><i class="fa fa-th-list"></i></button>
<button><i class="fa fa-search"></i></button>
<button><i class="fa fa-user"></i></button>
<button><i class="fa fa-th-list"></i></button>
<button><i class="fa fa-search"></i></button>
<button><i class="fa fa-user"></i></button>
<button><i class="fa fa-th-list"></i></button>
</div>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
background-color: #ebecf0;
height: 100vh;
}
.box{
width: 270px;
text-align: center;
padding: 32px;
}
.box button{
width: 48px;
height: 48px;
color: #61677c;
box-shadow: -5px -5px 20px #ffffff,
5px 5px 20px #babecc;
border: none;
outline: none;
padding: 16px;
background: #ebecf0;
border-radius: 8px;
cursor: pointer;
margin: 8px;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 19px;
transition: all 0.2s ease-in-out;
}
.box button:hover{
box-shadow: -2px -2px 5px #fff,
2px 2px 5px #babecc;
}
.box button:active{
box-shadow: inset -1px -1px 2px #babecc,
inset -1px -1px 2px #fff;
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.