<div class="container">
<div class="neumorphism"></div>
</div>
body {
background-color: #e8e8e8;
height: 300px;
position: relative;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.neumorphism {
width:200px;
height: 100px;
transition: .2s all;
border-radius: 20px;
background: #e8e8e8;
box-shadow: 15px 15px 30px #bebebe,
-15px -15px 30px #ffffff;
cursor: pointer;
}
.neumorphism:hover {
box-shadow: 5px 5px 15px #bebebe,
-5px -5px 15px #ffffff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.