利用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 相关文章推荐
如何利用CSS3制作3D效果文字具体实现样式
May 02 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 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 第二节 数据类型之数组
2012/04/28 PHP
php获取参数的几种方法总结
2014/02/18 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
对比分析json及XML
2014/11/28 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
面试题:react和vue的区别分析
2019/04/08 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
Django csrf 验证问题的实现
2018/10/09 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
基于Python fminunc 的替代方法
2020/02/29 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
计算机网络专业求职信
2014/06/05 职场文书
百日安全生产活动总结
2014/07/05 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
六年级小学生评语
2014/12/26 职场文书
初中优秀学生评语
2014/12/29 职场文书
音乐教师个人总结
2015/02/06 职场文书
建国大业观后感600字
2015/06/01 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js