优德娱乐场w88手机版:一个值得你收藏的教程网站

最新下载

纯CSS实现3D按钮效果的实例解析

时间:2016-12-21 00:00:00 编辑:简简单单 来源:转载

今天分享一个用纯css实现的3D按钮。

css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值。

让人感觉有一种按钮被按下的感觉。css代码非常少,如下所示:

a.css-3d-btn{  position:relative;  color: rgba(255,255,255,1);  text-decoration:none;  background-color: rgba(219,87,51,1);  font-family:"微软 YaHei", MicroSoft雅黑, 宋体;  font-weight:700;  font-size:3em;  display:block;  padding:4px;  border-radius:8px;  /* let's use box shadows to make the button look more 3-dimensional */  box-shadow:0px9px0pxrgba(219,31,5,1),0px9px25pxrgba(0,0,0, .7);  margin:100pxauto;  width:160px;  text-align:center;  -webkit-transition:all.1s ease;  -moz-transition:all.1s ease;  transition:all.1s ease; }   /* now if we make the box shadows smaller when the button is clicked, it'll look like the button has been "pushed" */   a.css-3d-btn:active{  box-shadow:0px3px0pxrgba(219,31,5,1),0px3px6pxrgba(0,0,0, .9);  position:relative;  top:6px; }

效果如下:

纯CSS实现3D按钮效果的实例解析

文章评论

热门栏目

XML 地图 | Sitemap 地图