整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS伪元素主要是指HTML中没有定义、存在的元素，伪元素本身不是真正的页面元素，但是伪元素在使用过程中，其用法与效果与其他真正页面元素是一样的。伪元素只能在定义基础上动态显示其运行效果，在HTML源文件中并没有该元素的真正代码。CSS3中所定义的所有伪元素与伪类描述如下图所示：
CSS伪元素与伪类
ripple波纹
按钮的波纹效果主要是指按钮在点击时展示出的动态效果。在实现效果过程中可行的方法方式较多，例如可以使用JavaScript、CSS动画、JQuery等。网上目前按钮波纹实现效果较多，部分样式效果展示如下：
波纹效果展示
CSS伪类波纹效果主要借助于before、after伪类与hover悬停选择器等实现类似波纹效果，本文主要借助after及hover等实现按钮的波纹效果，本例设计两种类似波纹效果，最终实现效果展示如下图所示：
设计样式1
设计样式2
本文设计实现的两类波纹效果样式描述如上图gif所示，其实现过程描述如下：
1、按钮基本样式设计
本例按钮基本样式主要包括宽度、高度、背景颜色等。使用元素选择器与类选择器定义了按钮元素的基本样式，其样式实现代码描述如下：
button,.button2,.button{width: 200px; height: 50px; background-color: green;border: 0; cursor: pointer;color: #FFF; font-size: 16px; position: relative;}
.button类主要用以实现设计样式1，.button2类主要用于实现设计效果2，两类按钮定义描述如下：
<button type="button" class="button">Ripple1</button> <button type="button" class="button2">Ripple2</button>
2、after伪元素使用
after伪元素主要用于实现在指定元素的后面添加新的内容。本例提供的两种设计方式都是在button元素的后面添加新的类似div的新元素，其中样式1，新添加的元素与button本身重合，尺寸也一致。设计样式2中after元素位于button的底部位置，宽度与button相同，高度为指定尺寸5px。两个设计中after元素样式为实现动态展开效果都涉及宽度width为0。after元素的样式定义如下：
.button::after{content: " "; width: 0; height: 50px; position: absolute; left:50%;top: 0%;background-color: red;opacity: 0; transition: all .4s; }
.button2::after{content: " "; width: 0; height: 5px; position: absolute; left:50%;top: 100%;background-color: red;transition: all .4s; }
after元素CSS样式定义中使用了transition属性实现动画效果，即在0.4s内实现宽度从0改变为100%。
3、hover选择器的使用
hover选择器为悬停选择器，主要对鼠标在HTML元素悬停时样式进行设置。本例两个涉及效果都是借助hover悬停选择器对after样式进行设置，在初始化设置宽度为0的基础上宽度改变为100%，最终实现两端伸展的效果。hover选择器定义after元素样式描述如下所示：
.button:hover::after{left:0%; width: 100%; opacity: 0.6;}
.button2:hover::after{left:0%; width: 100%;}
以上给出了CSS伪元素实现波纹效果，主要借助了after、before伪元素与hover悬停选择器等。设计实现效果完整源文件截图如下：
案例完整代码
以上给出了JavaScript中的事件基本概念及案例分析，如有问题可在评论区讨论。本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可以联系作者，共同探讨。期待大家关注！相关文章链接如下：
前端开发-JavaScript中的事件（Event）及事件处理总结
前端开发-CSS3动画实现焦点(图文轮播)图效果
前端开发-JavaScript DOM动态生成文本框
前端设计-教你如何快速绘制HTML5动画
前端设计-响应式页面开发基础
前端设计-Ajax技术及实例展示
PowerModeInput 可以让你的文本输入框更引人注目。
地址:https://github.com/lindelof/power-mode-input
简单的样式和效果，可增强文本输入交互。
地址:https://github.com/codrops/TextInputEffects
一个简单而强大的原生javascript插件，具有很酷的打字机效果。
地址:https://github.com/tameemsafi/typewriterjs
轻量级 $.Hypertext.Typewriter
地址: https://github.com/mntn-dev/t.js
ShuffleText 是一款纯js文字洗牌式切换特效插件。该插件在鼠标滑过指定的文本时，文字会不停的逐个进行翻转，类似洗牌效果，非常炫酷。
地址: https://github.com/ics-ikeda/shuffle-text
适用于 react 的打字机的效果
地址：https://github.com/ianbjorndilling/react-typewriter
T-Writer.js 用于实现原生打字机效果，没有任何依赖。
地址: https://github.com/ChrisCavs/t-writer.js
模拟在DOM元素上的打字机效果。
地址：https://github.com/yuanqing/malarkey
TinyTyper 一个微小的库用于在一段指定的文本元素上创建打字效果。
地址：https://github.com/lourenc/tinytyper
https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/8MTkbe9Crg.gif
typer.js插件是一个非常有意思的jQuery插件，实现一个一个字输出，类似打字的效果。typer.js是一个比较小的插件，依赖于jQuery。typer.js使用起来也比较方便，允许设置打字时间间隔，循环输出，清除打字效果时间等。
Phaser.io Javascript库的打字机效果包装器。
地址: https://github.com/netgfx/Phaser-typewriter
ElasticProgress 可以创建一个有弹力效果的进度条。
地址: https://github.com/codrops/ElasticProgress
https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/1sfasfsafasf564safsaf6saf1as.gif
爆发粒子特效按钮组件。
地址: https://github.com/dreambo8563/vue-particle-effect-buttons
NativeScript插件，可为按钮添加发光效果。
地址:https://github.com/hamdiwanis/nativescript-shine-button
让按钮有一个水平视差效果。
地址: https://github.com/venits/react-parallax-button
具有Material Theme波纹效果的按钮。
地址: https://github.com/mig82/RippleButton
css-ripple-effect 是一款使用纯CSS3制作的炫酷扁平风格按钮点击波特效。该效果是仿照Android系统的Material design风格点击波来制作的。
地址:https://github.com/mladenplavsic/css-ripple-effect
人才们的 【三连】 就是小智不断分享的最大动力，如果本篇博客有任何错误和建议，欢迎人才们留言，最后，谢谢大家的观看。
作者：lindelof 译者：前端小智 来源:github
原文：https://github.com/lindelof/awesome-web-effect
天跟大家分享与CSS3按钮相关的特效展示案例，这些例子特效主要由CSS3编写出来，除了新鲜有创意之外，编写代码质量也很高，对于前端人员或设计师都有参考的价值，当然有的不是全CSS3编写的，部分是需要与JS代码结合使用才能发挥效果。
下面大家一起看看这些CSS按钮DEMO，确实很酷哦！
整理了16款css按钮，经过全部测试，没发现有影响使用的bug，其中也可能存在部分bug，但是应该问题不大。
代码已上传到网盘，获取源码请关注公众号【青年码农】回复【css按钮】即可。
*请认真填写需求信息，我们会在24小时内与您取得联系。
