纯CSS实现立体感圆盘（立体化按钮），点击有图

立体感圆盘（立体化按钮），点击有图"/>

纯CSS实现立体感圆盘（立体化按钮），点击有图

在线编辑：/

<div class="inner"><div class="disc"></div>
</div>

.inner{position:relative;width:300px;height:300px;border-radius:150px;background: linear-gradient(to top, silver, whitesmoke);display:flex;justify-content:center;align-items:center;
}
.inner .disc{position:absolute;width:80%;height:80%;border-radius:50%;background:linear-gradient(silver,whitesmoke);
}
/* .inner .disc::before{position:absolute;left:calc((100% - 80%)/2);top:calc((100% - 80%)/2);content:"";width:80%;height:80%;border-radius:50%;background:linear-gradient(to top, silver,whitesmoke);
}
.inner .disc::after{position:absolute;left:calc((100% - 60%)/2);top:calc((100% - 60%)/2);content:"";width:60%;height:60%;border-radius:50%;background:linear-gradient(silver,whitesmoke);
} */

第一个图形：是用来两个元素标签,一个嵌在另一个里面，利用两个颜色的视觉差，实现立体化效果。

第二个图形：后面整加的两个内园，是利用了伪元素实现的，伪元素的定位是相对于伪元素寄托的元素，使用left,top时可以借助calc进行计算。