一个Css3按钮效果很好，仔细看了一下发现就是::after,::before然后加上transition，transform等效果实现，主要关注一下几点就能轻松实现：

1、伪类需要position定位，相对的button也需要定位一下

2、设置一下z-index属性,一般button设置为1， button::after或者button:before设置为-1即可

3、transition实现动画效果，如果需要transform旋转一下

效果如下：

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<meta charset="utf-8" />

<style type="text/css">

button:hover:after {

width: 100%;

}

button:hover {

color: #000;

}

button:after {

content: '';

background-color: #fff;

transition: all .5s;

width: 0%;

position: absolute;

top: 3px;

left: 0px;

height: 34px;

z-index: -1;

}

button {

width: 100px;

height: 40px;

border: 0px;

color: white;

background-color: red;

font-size: 16px;

position: relative;

z-index: 1;

cursor: pointer;

font-family: 'Microsoft YaHei';

}

</style>

</head>

<body>

<button>

保存

</button>

</body>

</html>

基础理解2:CSS3按钮动画的更多相关文章

  1. 8款超酷而实用的CSS3按钮动画

    1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...

  2. 魔幻般冒泡背景的CSS3按钮动画

    这是一款非常有特点的CSS3按钮,按钮的背景不是北京图片,也不是单纯的颜色,而是一组魔幻般的冒泡背景动画.当我们将鼠标滑过按钮时,按钮的冒泡背景动画就可以展示出来.可以说这款CSS3按钮的设计风格相当 ...

  3. 纯CSS3冒泡动画按钮实现教程

    这款CSS3动画按钮非常的有创意,鼠标在滑过按钮时并不像其他按钮那样仅仅改变按钮的背景颜色,而是出现很酷的冒泡动画.这么惊艳的CSS3动画按钮,这篇文章主要将按钮实现的过程和代码分享给大家,希望能给在 ...

  4. 5个基于css3超炫的鼠标滑动按钮动画

    今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

  5. 8套迷人精致的CSS3 3D按钮动画

    1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...

  6. 6种炫酷的CSS3按钮边框动画特效

    6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...

  7. 一款基于css3的动画按钮

    之前为大家分享了 推荐10款纯css3实现的实用按钮.今天给大家带来一款基于css3的动画按钮.实现的效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=& ...

  8. 《零基础学HTML5+CSS3(全彩版)》读书笔记

    2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...

  9. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

随机推荐

  1. 深入理解定时器系列第二篇——被誉为神器的requestAnimationFrame

    × 目录 [1]引入 [2]特点 [3]使用[4]兼容[5]应用 前面的话 与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔.这有什么好 ...

  2. WCF 实体更改发布后，如何不影响调用方？

    应用场景:使用 WCF 有一个坏处,就是如果我们经常对 WCF 应用程序更新,有时候调用方也要进行 Update Service,但调用方往往会很多,那么这个工作就会很讨厌,比如 WCF Servic ...

  3. 关于一道数据库例题的解析。为什么σ age>22 (πS_ID，SCORE (SC) ) 选项是错的？

    本人大二学子.近段时间在做数据库复习题的时候遇到一道题,如下. 有关系SC(S_ID,C_ID,AGE,SCORE),查找年龄大于22岁的学生的学号和分数,正确的关系代数表达式是( ) . ⅰ. πS ...

  4. 原生JS实现jquery的链式编程。

    这是我根据之前遇到的一个面试题,题目:用原生JS实现$("#ct").on("click",fn).attr("id"). 然后看了篇jqu ...

  5. Understanding delete

    简述 我们都知道无法通过delete关键字针对变量和函数进行操作,而对于显示的对象属性声明却可以进行,这个原因需要深究到js的实现层上去,让我们跟随 Understanding delete 来探究一 ...

  6. Linux使用lvresize扩展或缩减lv大小

    环境:CentOS 6.7 一.新建并挂载目录 /u01 和 /data 1.创建目录挂节点/u01,/data mkdir -p /{u01,data} 2.创建lv,名称是lv_u01,大小10g ...

  7. [linux]挂载smb

    什么是 smb 服务器消息区块(英语:Server Message Block,缩写为SMB,服务器消息区块),又称网络文件共享系统(英语:Common Internet File System,缩写 ...

  8. Ajax提交参数的值中带有html标签不能提交成功的解决办法（ASP.NET）

    最近在公司做资源及文章上传功能遇到一个小问题,被坑了好半天. 该功能就类似利用富文本编辑器发布信息,但是用Ajax提交数据,因此提交参数值中不可避免的含有html标签. 在本地运行代码一直没问题,总是 ...

  9. cmd执行SQL语句

    首先新建txt文本,复制粘帖以下内容,保存为cmd执行SQL.bat.注意是bat文件 osql -S 服务器名称 -d 数据库 -U 登录名 -P 密码 -i 盘符:\文件夹\文件.sql

  10. Redis修改数据多线程并发—Redis并发锁

    本文版权归博客园和作者本人吴双共同所有 .转载爬虫请注明地址,博客园蜗牛 http://www.cnblogs.com/tdws/p/5712835.html 蜗牛Redis系列文章目录http:// ...