首页 > 代码库 > Div+Css(2):纯Div+Css制作的漂亮点击按钮和关闭按钮
Div+Css(2):纯Div+Css制作的漂亮点击按钮和关闭按钮
纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.
值得注意三点:
1.其中,主要使用了rotate.它能让文字旋转角度
2.还有radius,做圆角专用,很好用的属性.给想我这样的人省去了作图的时间.
3.W3C标准中对CSS3的transition这是样描述的:"CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。"
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 span{ 8 display: inline-block; 9 font-size: 40px;10 font-weight: 700;11 line-height: 40px;12 text-shadow: 0 1px 2px rgba(0,0,0,.1);13 -o-transform: rotate(45deg);14 -moz-transform: rotate(45deg);15 -webkit-transform: rotate(45deg);16 -ms-transform: rotate(45deg);17 }18 button{19 font-size: 24px;20 letter-spacing: 15px;21 cursor: pointer;22 width: 300px;23 height: 44px;24 margin-top: 25px;25 padding: 0;26 background: #ef4300;27 -moz-border-radius: 6px;28 -webkit-border-radius: 6px;29 border-radius: 6px;30 border: 1px solid #ff730e;31 -moz-box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset,32 0 2px 7px 0 rgba(0,0,0,.2);33 -webkit-box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset,34 0 2px 7px 0 rgba(0,0,0,.2);35 box-shadow: 0 15px 30px 0 rgba(255,255,255,.25) inset,36 0 2px 7px 0 rgba(0,0,0,.2);37 font-family: ‘PT Sans‘, Helvetica, Arial, sans-serif;38 font-weight: 700;39 color: #fff;40 text-shadow: 0 1px 2px rgba(0,0,0,.1);41 -o-transition: all .2s;42 -moz-transition: all .2s;43 -webkit-transition: all .2s;44 -ms-transition: all .2s;45 }46 button:hover {47 -moz-box-shadow: 0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2);48 -webkit-box-shadow: 0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2);49 box-shadow: 0 15px 30px 0 rgba(255,255,255,.15) inset,0 2px 7px 0 rgba(0,0,0,.2);50 }51 </style>52 <script type="text/javascript" src="js/jquery-2.1.1.js"></script>53 <script type="text/javascript">54 $("button").click(function(){55 alert("nihao!");56 57 });58 </script>59 </head>60 <body>61 <span>+</span><br/>62 <button>点击</button>63 </body>64 </html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。