首页
导航
博客
电子书
算法
众创
代码
随贴
关于我们
您好,欢迎来到码863代码分享网! 请
[登录]
/
[注册]
搜 索
css实现3d立体感按钮
编辑
css3实现立体感按钮
代码正文
双击正文可选择全部
1[代码][html]有hover与点击效果
尝试一下
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .button { display: inline-block; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 18px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: 30px; -moz-border-radius:30px; border-radius: 30px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .button:hover { text-decoration: none; } .button:active { position: relative; top: 1px; } .orange { color: #fef4e9; border: solid 1px #da7c0c; background: #f78d1d; background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); background: -moz-linear-gradient(top, #faa51a, #f47a20); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); } .orange:hover { background: #f47c20; background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015)); background: -moz-linear-gradient(top, #f88e11, #f06015); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015'); } .orange:active { color: #fcd3a5; background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a)); background: -moz-linear-gradient(top, #f47a20, #faa51a); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a'); } </style> </head> <body> <center> <a href="#" class="orange button">注册</a> </body> </html>
2[代码][html]有hover 无点击效果
尝试一下
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .button, .button:visited { background: #222 url(overlay.png) repeat-x; display: inline-block; padding: 5px 10px 6px; color: #fff; text-decoration: none; -moz-border-radius: 30px; -webkit-border-radius: 30px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); position: relative; cursor: pointer } .small.button, .small.button:visited { font-size: 11px } .button, .button:visited, .medium.button, .medium.button:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); } .large.button, .large.button:visited { font-size: 14px; padding: 8px 14px 9px; } .super.button, .super.button:visited { font-size: 34px; padding: 8px 14px 9px; } .pink.button, .magenta.button:visited { background-color: #e22092; } .pink.button:hover { background-color: #c81e82; } .green.button, .green.button:visited { background-color: #91bd09; } .green.button:hover { background-color: #749a02; } .red.button, .red.button:visited { background-color: #e62727; } .red.button:hover { background-color: #cf2525; } .orange.button, .orange.button:visited { background-color: #ff5c00; } .orange.button:hover { background-color: #d45500; } .blue.button, .blue.button:visited { background-color: #2981e4; } .blue.button:hover { background-color: #2575cf; } .yellow.button, .yellow.button:visited { background-color: #ffb515; } .yellow.button:hover { background-color: #fc9200; } </style> </head> <body> <center> <a class="green small button">猪注册</a> <a class="green medium button">猪注册</a> <a class="green large button">猪注册</a> <a class="green super button">猪注册</a> <a class="pink large button">猪注册</a> <a class="red large button">猪注册</a> <a class="orange large button">猪注册</a> <a class="blue large button">猪注册</a> <a class="yellow large button">猪注册</a> </body> </html>
3[代码][html]无hover与点击效果
尝试一下
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> button{ display: inline-block; background:#c6e0ec; height:50px; width:150px; border-radius:20% 10% 20% 10% / 80% 10% 80% 10%; border:1px solid #58a; box-shadow:/*底部灰色阴影*/ 2px 4px 2px 5px rgba(0,0,0,0.2), /*下面深蓝色立体阴影*/ 2px 4px 1px 1px #49a1ff, /*内部暗色阴影*/ 0 -15px 2px 2px rgba(0,0,0,0.10) inset; color: #f06d13; text-shadow: rgba(255,255,255,.5) 0 1px 0; font: 18px/20px 'Droid Sans', sans-serif; font-weight: bold; margin:0 0 0 10px; } </style> </head> <body> <center> <button>注册</button> </body> </html>
文明上网理性发言,请遵守新闻评论服务协议
0 条评论
发布评论
全部评论
最新
/
最热
暂无评论
加载更多
CopyRight 2002~2023 精通2100网 联系邮箱:qqtxt@163.com
版权所有:精通2100网
湘ICP备2023018646号-1
MYSQl共执行 3 个查询,用时 0.0017459392547607 秒,PHP脚本用时 0.003950 秒,占用内存 0.514 MB,Gzip 已启用