HTML代码
首先定义一个3D按钮的HTML，如下：
- <a href="#null">极客标签</a>
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;
- }
再添加几个不同颜色的效果，代码如下：
- .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;
- }
