一个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. CSS list-style属性控制ul标签样式

    试一试 <style type="text/css" media="all"> ul { list-style-type: disc; } ul#c ...

  2. JAVA服务器搭建之问题总结

    负责维护公司产品的web服务器搭建与维护,最近遇到一下状况,今天在这里简单总结一下,希望对于刚刚一些刚入行的小伙伴有所帮助,避免再走弯路. 第一点:Tomcat内存设置: 一.常见的Java内存溢出有 ...

  3. 百度sdk定位不成功,关闭定位

    公司项目有用到百度地图,登录的时候需要定位一次,获取登录的地址信息,在手机无法连接外网的情况,也就无法访问百度定位服务器的时候,定位的回调函数要30秒以上才能返回结果,于是去仔细查百度api,发现没有 ...

  4. Objective-C中小怪兽的逻辑

    学习Objective-C的面向对象也有一段时间了,为了犒劳自己的学习成果,写个小怪兽来犒劳一下自己把.在LOL中有怪兽和英雄的角色吧,接下来就先写一个小怪兽的类吧.从小怪兽的角度来讲,怪兽都有那些行 ...

  5. 相克军_Oracle体系_随堂笔记014-锁 latch,lock

    1.Oracle锁类型 2.行级锁:DML语句 3.表级锁:TM 4.锁的兼容性 5.加锁语句以及锁的释放 6.锁相关视图 7.死锁 1.Oracle锁类型 锁的作用     latch锁:chain ...

  6. iOS_MJRefrash的详解以及使用

    MJRefresh Github 效果动态图来这里看吧 该博客Demo下载地址 一. MJRefresh的类解释. 1.MJRefreshComponent              所有刷新控件的基 ...

  7. 分享一下刚刚HP电话面试。。。。。。。。我估计我挂了，不过还是要来分享一下

    面试官是个中国人,给我是全英文面试,总之是做HP的外包业务,说得很好的工作环境,里面都是一些老外在工作. 首先是要用英文介绍了下自己,我自己觉得自己也还是不错的吧,然后就说了一通(其实我好久没说英文了 ...

  8. AngularJs之Scope作用域

    前言: 上篇博文AngularJs之directive中说了Scope作用域是个大坑,所以拿出来作为重点总结! 什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执 ...

  9. 如何设置 Panorama 控件的只读 SelectedIndex 属性？

    在 OnNavigatedTo() 方法中设置: panoramaControl.DefaultItem = panoramaControl.Items[indexToSet];

  10. iframe在iphone6 plus的safari下子页面的宽度不受父页面控制的bug

    这是想要的效果: 样式设置是iframe外面的宽度为100%,iframe的宽度为父元素的90%,高度为宽度 除以1.6,固定比例, 正常显示就是上面的样子,但是,问题出现在iphone特定手机特定版 ...