纯CSS3 3D按钮点击效果
2020-05-02 177 分享

纯CSS3 3D按钮点击效果 

显示效果 : 

1565770214851435.png

点击效果 : 

1565770231376755.png

<!doctype html> 
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3 3D按钮</title>
<style>
ul{             list-style: none;  width: 120px;  margin: auto;  margin-top: 200px;  }         a.button{             display: block;  position: relative;  height: 25px;  line-height: 25px;  width: 120px;  margin: 0 10px 18px 0;  text-decoration: none;  font-weight: 700;  text-align: center;  -webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;  }         .gray,.gray:hover{             color: #555;  border-bottom: 4px solid #b2b1b1;  background: #eee;  }         .gray:hover{             background: #e2e2e2;  box-shadow: 1px 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,0.3);  }         a.button:before,a.button:after{             content: "";  position: absolute;  left: -1px;  height: 25px;  width: 120px;  line-height: 25px;  bottom:-1px;  -webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;  }         a.button:before{             height: 23px;  bottom:-4px;  border-top: 0;  -webkit-border-radius: 0 0 3px 3px;  -moz-border-radius: 0 0 3px 3px;  border-radius: 0 0 3px 3px;  -webkit-box-shadow: 0 1px 1px 0px #bfbfbf;  -moz-box-shadow: 0 1px 1px 0 #bfbfbf;  box-shadow: 0 1px 1px 0 #bfbfbf;  }         a.button:active{             border: none;  bottom: -4px;  margin-bottom: 22px;  -webkit-box-shadow: 0 1px 1px 0px #fff;  -moz-box-shadow: 0 1px 1px 0 #fff;  box-shadow: 1px 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,0.3);  }         a.button:active:before,a.button:active:after{             border: 0;  -webkit-box-shadow: none;  -moz-box-shadow: none;  box-shadow: none;  }     </style> </head> <body> <ul id="container">     <li><a href="" class="button gray">测试3d按钮</a></li> </ul> </body> </html>
相关推荐
css3鼠标悬浮图片左右摇晃
鼠标悬浮,图片左右摇晃
2020-05-02188分享
css3鼠标悬浮,盒子向上移动
鼠标悬浮,盒子向上移动
2020-05-02208分享
前端文字过多,以省略号自动截取
text-overflow: ellipsis;/*文本超出以...显示*/ overflow: hidden;/*超出盒子隐藏*/ white-space: nowrap;/*强制在第一行显示*/
2020-05-02219分享
CSS3 文字阴影
CSS3 文字阴影 text-shadow属性
2020-05-02179分享
HTML5表单list属性
<input type="text" list="url_list" > <datalist id="url_list">    <option value="测试">    <option value="数据">    <option value="不知道"> </datalist>
2020-05-02196分享
HTML5新增标记(有利于维护,以及浏览器解析,有利于搜索引擎爬取)
html新增常用标记(有利于维护,以及浏览器解析,有利于搜索引擎爬取)下面列出个别常用 :
2020-05-02154分享
CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程,可以自定义)
CSS3的transform:scale(1.4)可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性过渡时间。 这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发.
2020-05-02192分享

联系站长 : 17620917002
站长邮箱 : 425158482@qq.com
问题咨询 : QQ 425158482
系统长期维护,放心使用

备案号:蜀ICP备19015811号-3

案例展示
电脑展示 手机展示
首页
系统
笔记
登录