编程 HTML / CSS

利用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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

css3制作动态进度条以及附加jQuery百分比数字显示

Dec 13 HTML / CSS

html5 input属性使用示例

Jun 28 HTML / CSS

HTML5实现锚点时请使用id取代name

Sep 06 HTML / CSS

html5 video标签屏蔽右键视频另存为的js代码

Nov 12 HTML / CSS

HTML5 Canvas中绘制椭圆的4种方法

Apr 24 HTML / CSS

HTML5 history新特性pushState、replaceState及两者的区别

Dec 26 HTML / CSS

H5 canvas实现贪吃蛇小游戏

Jul 28 HTML / CSS

基于html5 canvas做批改作业的小插件

May 20 HTML / CSS

AmazeUI框架搭建的方法步骤(图文)

Aug 17 HTML / CSS

AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码

Aug 19 HTML / CSS

CSS3 制作精美的定价表

Apr 06 HTML / CSS

html+css 实现简易导航栏功能

Apr 07 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

从康盛产品(discuz)提取出来的模板类

2011/06/28 PHP

使用array mutisort 实现按某字段对数据排序

2013/06/18 PHP

php分页查询的简单实现代码

2017/03/14 PHP

javascript笔试题目附答案@20081025_jb51.net

2008/10/26 Javascript

jQuery Select(单选) 模拟插件 V1.3.62 改进版

2010/07/17 Javascript

jQuery对表单元素的取值和赋值操作代码

2011/05/19 Javascript

UpdatePanel和Jquery冲突的解决方法

2013/04/01 Javascript

仿谷歌主页js动画效果实现代码

2013/07/14 Javascript

jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

2014/05/08 Javascript

jQuery学习笔记之jQuery.fn.init()的参数分析

2014/06/09 Javascript

MUI Scroll插件的使用详解

2017/04/13 Javascript

微信小程序可搜索的地址选择实现详解

2019/08/28 Javascript

vue中 v-for循环的用法详解

2020/02/19 Javascript

解决Antd 里面的select 选择框联动触发的问题

2020/10/24 Javascript

[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局

2016/03/05 DOTA

python实现zencart产品数据导入到magento(python导入数据)

2014/04/03 Python

用Python程序抓取网页的HTML信息的一个小实例

2015/05/02 Python

python实现类的静态变量用法实例

2015/05/08 Python

Python实现Windows上气泡提醒效果的方法

2015/06/03 Python

Python中单、双下划线的区别总结

2017/12/01 Python

python常用库之NumPy和sklearn入门

2019/07/11 Python

Python Pandas对缺失值的处理方法

2019/09/27 Python

django框架中ajax的使用及避开CSRF 验证的方式详解

2019/12/11 Python

pytorch 实现tensor与numpy数组转换

2019/12/27 Python

Python函数调用追踪实现代码

2020/11/27 Python

弄清Pytorch显存的分配机制

2020/12/10 Python

HTML5之SVG 2D入门8—文档结构及相关元素总结

2013/01/30 HTML / CSS

手摸手教你用canvas实现给图片添加平铺水印的实现

2019/08/20 HTML / CSS

Groupon法国官方网站：特卖和网上购物高达-70%

2019/09/02 全球购物

LightInTheBox法国站：中国跨境电商

2020/03/05 全球购物

优秀演讲稿范文

2013/12/29 职场文书

党员违纪检讨书怎么写

2014/11/01 职场文书

婚礼答谢词

2015/01/04 职场文书

2015年世界水日活动总结

2015/02/09 职场文书

毕业论文致谢范文

2015/05/14 职场文书

纯html+css实现打字效果

2021/08/02 HTML / CSS