利用css3制作3D样式按钮实现代码


Posted in HTML / CSS onMarch 18, 2013

效果图如下:
利用css3制作3D样式按钮实现代码
源码如下:

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
#container {
margin: 120px auto;
text-align: center;
}
.button {
-webkit-transform: rotateX( 35deg );
position: relative;
display: inline-block;
width: 100px;
padding: 42px 15px;
margin: 0px 10px;
background-color: #C91826;
color: #fff;
font-weight: bold;
font-size: 40px;
text-decoration: none;
text-align: center;
text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
border: 1px solid;
border-color: #B21522;
border-radius: 78px;
-moz-border-radius: 78px;
-webkit-border-radius: 78px;
box-shadow: inset 0px -4px 5px rgba(255,255,255,0.2),
inset 0px 1px 5px rgba(255,255,255,0.2),
/**/
0px 12px 0px #231F20,
0px 14px 0px #231F20,
0px 16px 0px #231F20,
/**/
0px 8px 5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px -4px 5px rgba(255,255,255,0.2),
inset 0px 1px 5px rgba(255,255,255,0.2),
/**/
0px 12px 0px #231F20,
0px 14px 0px #231F20,
0px 16px 0px #231F20,
/**/
0px 8px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px -4px 5px rgba(255,255,255,0.2),
inset 5px 1px 5px rgba(255,255,255,0.2),
/**/
0px 12px 0px #231F20,
0px 14px 0px #231F20,
0px 16px 0px #231F20;
}
.button:hover {
background-color: #B21522;
color: #e3e3e3;
}
.button:active {
top: 8px;
box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4),
inset 0px -1px 5px rgba(255,255,255,0.2),
/**/
0px 8px 0px #231F20,
/**/
0px 9px 5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4),
inset 0px -1px 5px rgba(255,255,255,0.2),
/**/
0px 8px 0px #231F20,
/**/
0px 9px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4),
inset 0px -1px 5px rgba(255,255,255,0.2),
/**/
0px 8px 0px #231F20,
/**/
0px 9px 5px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id="container">
<a href="#" class="button">开始</a>
<a href="#" class="button">结束</a>
</div>
</body>
</html>
HTML / CSS 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 #HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 #HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 #HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 #HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 #HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 #HTML / CSS
用css3制作纸张效果(外翻卷角)
Feb 01 #HTML / CSS
You might like
PHP SESSION机制的理解与实例
2019/03/22 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
详解Python的Django框架中的中间件
2015/07/24 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
班级聚会策划书
2014/01/16 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
《风筝》教学反思
2014/04/10 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
MySQL数据管理操作示例讲解
2022/12/24 MySQL