Html 在按钮面板上显示背景深度

关于如何创建以下类型的仪表板，有什么线索吗？我用

我可以创建简单的

播放按钮

，如下所示：

 <a class="btn btn-success" (click)="onPlay()">
            <fa-icon [icon]="faPlayCircle" size="4x"></fa-icon>
 </a>

---

我认为，只有使用CSS，才能获得很好的效果。这里是一个仅使用HTML和CSS的小示例


.panel{
显示器：flex；
对齐项目：居中；
左侧填充：20px；
宽度：300px；
高度：90px；
背景#3d3d；
}
.集装箱运输{
位置：相对位置；
宽度：1px；
高度：1px；
背景：#f0f；
}
.持球人比赛{
位置：绝对位置；
顶部：钙（50%-37像素）；
宽度：74px；
高度：74px；
边界半径：50%；
背景：线性梯度（#333333，#6868）；
盒影：嵌入0px 0px 12px rgba（0,0,0,4）；
}
.玩{
位置：绝对位置；
顶部：钙（50%-30px）；
左：7px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：60px；
高度：60px；
边界半径：50%；
背景：线性梯度（#41825C，#1B4F2C）；
盒影：0px 3px 12px rgba（0,0,0,6）；
光标：指针；
}
.第一场{
字号：26px；
颜色：#fff；
}

这很好。但是如何显示图像上显示的深度（
红色
箭头区域）？嘿@Sampath，我更新了代码，添加了更精确的效果。你可以改进这一点。基本上，秘密在于知道如何使用一些CSS键，如带有属性
inset
的
框阴影
，以及
线性渐变
。