Show background depth on button panel - html

Question

Any clue about how to create below kind of dashboard? I use angular fontawesome.
I can create simple play button like so:
<a class="btn btn-success" (click)="onPlay()">
<fa-icon [icon]="faPlayCircle" size="4x"></fa-icon>
</a>
But How to do this? I would like to know about how to give the depth on the background like so on the image?

Answer 1

I think you can reach great results only with CSS. Here is a small sample only using HTML and CSS.
.panel {
display: flex;
align-items: center;
padding-left: 20px;
width: 300px;
height: 90px;
background: #3D3D3D;
}
.container-play {
position: relative;
width: 1px;
height: 1px;
background: #f0f;
}
.holder-play {
position: absolute;
top: calc(50% - 37px);
width: 74px;
height: 74px;
border-radius: 50%;
background: linear-gradient(#333333, #686868);
box-shadow: inset 0px 0px 12px rgba(0,0,0,.4);
}
.play {
position: absolute;
top: calc(50% - 30px);
left: 7px;
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(#41825C, #1B4F2C);
box-shadow: 0px 3px 12px rgba(0,0,0,.6);
cursor: pointer;
}
.play i {
font-size: 26px;
color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="panel">
<div class="container-play">
<div class="holder-play">
<div class="play"><i class="fa fa-play"></i></div>
</div>
</div>
</div>