纯CSS实现一个3D按钮

效果:

代码:

html:

<div class="btn">3D</div>

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);
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1 92
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,670评论 0 30
  • 对于新媒体的写作,开始我觉得自己是一个不怎么会表达的人,语文作文也写不好,如何能写出好的文章,并获得更大的阅读量呢...
    habin阅读 136评论 0 0
  • 总是有这么一种男人无处不在地存在着: 当女人忘记带伞,一筹莫展地看着一片黑压压的乌云,凑巧天又下起了大雨,她只能奋...
    梁山女汉子阅读 2,991评论 0 0
  • 2013年得了焦虑症,浅表性胃炎,心脏神经官能症,从68公斤一个月瘦到58公斤,吃不下饭,吃东西不消化,焦虑发作的...
    渐入佳境_333阅读 16,338评论 9 23