纯CSS实现一个3D按钮
效果： 
文章图片
代码：
html：
3D
【纯CSS实现一个3D按钮】css：
body{
background:#229FFD;
}
.btn{
font-weight:bold;
font-size:25px;
background:#fff;
display:inline-block;
width:100px;
height:100px;
text-align:center;
line-height:100px;
border-radius:100%;
margin:50px;
box-shadow:
0 10px 0 #e0e0e0,
0 15px 2px rgba(0,0,0,0.2);
cursor:pointer;
transition:all 0.2s;
}
.btn:active{
transform:translateY(8px);
box-shadow:
0 2px 0 #e0e0e0,
0 4px 2px rgba(0,0,0,0.3);
}
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM