<head>
<style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
width:100vw;
height:100vh;
background:#efeeee;
display:grid;
place-items:center;
}
.container{
display:grid;
place-items:center;
cursor:pointer;
padding:4rem;
background:#efeeee;
border-radius:50%;
transition:all 0.3s ease-in;
box-shadow: 10px 10px 10px rgba(0,0,0,0.1),
-10px -10px 10px rgba(255,255,255,0.6);
}
.container .fas{
display:grid;
place-items:center;
font-size:4rem;
color:gray;
}
.container:active{
box-shadow: inset 10px 10px 10px rgba(0,0,0,0.1),
inset -10px -10px 10px rgba(255,255,255,0.6);
}
.container:active .fas{
color:#721efa;
}
</style>
</head>
<body>
<div class="container">
<i class="fas fa-play"></i>
</div>
</body>