|
[tr][td]本文将介绍如何使用最简单的CSS3代码来生成一个拥有点击效果的3D按钮
图片：1108400kykimok7k5zm5ly.jpg  HTML代码 首先定义一个3D按钮的HTML，如下： [*]极客标签 复制代码 CSS代码 定义按钮相关的CSS，如下： [*]定义按钮动画过渡属性 [*].animate [*]{ [*] transition: all 0.3s; [*] -webkit-transition: all 0.3s; [*]} 复制代码 以上代码定义所有的属性过渡延迟时间0.3秒 [*]定义动态按钮CSS属性 [*].action-button [*]{ [*] position: relative; [*] padding: 10px 40px; [*] margin: 0px 10px 10px 0px; [*] float: left; [*] border-radius: 5px; [*] font-family: 'microsoft yahei',Arial,sans-serif; [*] font-size: 24px; [*] font-weight:normal; [*] color: #FFF; [*] text-decoration: none; [*]} 复制代码 定义一个橙色按钮类： [*].orange{ [*] background-color: orange; [*] border-bottom: 5px solid #ab7018; [*] text-shadow: 0px -2px #D1B358; [*]} 复制代码 最后定义按钮激活状态CSS，即用户点击a标签时的相关CSS属性定义，使用CSS3位移变形效果translate实现： [*].action-button:active [*]{ [*] transform: translate(0px,5px); [*] -webkit-transform: translate(0px,5px); [*] border-bottom: 1px solid; [*]} 复制代码 点击一下链接看看最终的3D按钮生成效果吧 http://www.gbtags.com/gb/rtreplayerpreview/706.htm 再添加几个不同颜色的效果，代码如下： [*].blue [*]{ [*] background-color: #3498DB; [*] border-bottom: 5px solid #2980B9; [*] text-shadow: 0px -2px #2980B9; [*]} [*] [*].red [*]{ [*] background-color: #E74C3C; [*] border-bottom: 5px solid #BD3E31; [*] text-shadow: 0px -2px #BD3E31; [*]} [*] [*].green [*]{ [*] background-color: #82BF56; [*] border-bottom: 5px solid #669644; [*] text-shadow: 0px -2px #669644; [*]} [*] [*].yellow [*]{ [*] background-color: #F2CF66; [*] border-bottom: 5px solid #D1B358; [*] text-shadow: 0px -2px #D1B358; [*]} 复制代码 点击下面地址查看按钮效果： http://www.gbtags.com/gb/rtreplayerpreview/707.htm 教程视频 via:http://www.gbtags.com/gb/share/5082.htm [/td][/tr] |
|
