使用CSS3设计漂亮的动画效果3D大按钮 - HTML5+CSS3教程 - 科蚁网
请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

科蚁网 科蚁网 科蚁学院 HTML5+CSS3教程 查看内容

使用CSS3设计漂亮的动画效果3D大按钮

2015-6-1 23:30| 发布者: admin| 查看: 2171| 评论: 2|来自: 网络搜集

摘要: 本文将介绍如何使用最简单的CSS3代码来生成一个拥有点击效果的3D按钮 HTML代码 首先定义一个3D按钮的HTML,如下: a href=#null极客标签/a复制代码 CSS代码 定义按钮相关的CSS ...
本文将介绍如何使用最简单的CSS3代码来生成一个拥有点击效果的3D按钮


HTML代码

首先定义一个3D按钮的HTML,如下:

  1. <a href="#null">极客标签</a>
复制代码

CSS代码

定义按钮相关的CSS,如下:

  • 定义按钮动画过渡属性

  1. .animate
  2. {
  3.   transition: all 0.3s;
  4.   -webkit-transition: all 0.3s;
  5. }
复制代码

以上代码定义所有的属性过渡延迟时间0.3秒

  • 定义动态按钮CSS属性

  1. .action-button
  2. {
  3.   position: relative;
  4.   padding: 10px 40px;
  5.   margin: 0px 10px 10px 0px;
  6.   float: left;
  7.   border-radius: 5px;
  8.   font-family: 'microsoft yahei',Arial,sans-serif;
  9.   font-size: 24px;
  10.   font-weight:normal;
  11.   color: #FFF;
  12.   text-decoration: none;        
  13. }
复制代码

定义一个橙色按钮类:

  1. .orange{
  2.         background-color: orange;
  3.         border-bottom: 5px solid #ab7018;
  4.         text-shadow: 0px -2px #D1B358;
  5. }
复制代码

最后定义按钮激活状态CSS,即用户点击a标签时的相关CSS属性定义,使用CSS3位移变形效果translate实现:

  1. .action-button:active
  2. {
  3.         transform: translate(0px,5px);
  4.        -webkit-transform: translate(0px,5px);
  5.         border-bottom: 1px solid;
  6. }
复制代码

点击一下链接看看最终的3D按钮生成效果吧

http://www.gbtags.com/gb/rtreplayerpreview/706.htm

再添加几个不同颜色的效果,代码如下:

  1. .blue
  2. {
  3.         background-color: #3498DB;
  4.         border-bottom: 5px solid #2980B9;
  5.         text-shadow: 0px -2px #2980B9;
  6. }

  7. .red
  8. {
  9.         background-color: #E74C3C;
  10.         border-bottom: 5px solid #BD3E31;
  11.         text-shadow: 0px -2px #BD3E31;
  12. }

  13. .green
  14. {
  15.         background-color: #82BF56;
  16.         border-bottom: 5px solid #669644;
  17.         text-shadow: 0px -2px #669644;
  18. }

  19. .yellow
  20. {
  21.         background-color: #F2CF66;
  22.         border-bottom: 5px solid #D1B358;
  23.         text-shadow: 0px -2px #D1B358;
  24. }
复制代码


鲜花

握手

雷人

路过

鸡蛋
发表评论

最新评论

引用 QQ群521595826 2016-1-5 23:00
【怎么学好HTML5】想学习HTML5注重的是实战,如果你真的想学习HTML5可以来这个群【521-595-826】这里有很多人指导你一起学习,还有免费的课程分享给你
引用 筑墙碎梦 2015-10-30 09:14
感谢分享

查看全部评论(2)


关闭

站长推荐上一条 /1 下一条

客服中心 官方QQ群