波纹特效:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>按钮动画 - 波纹效果</title>

<style>

.button {

    position: relative;

    background-color: #4CAF50;

    border: none;

    font-size: 28px;

    color: #FFFFFF;

    padding: 20px;

    width: 200px;

    text-align: center;

    -webkit-transition-duration: 0.4s; /* Safari */

    transition-duration: 0.4s;

    text-decoration: none;

    overflow: hidden;

    cursor: pointer;

}

.button:after {

    content: "";

    background: #90EE90;

    display: block;

    position: absolute;

    padding-top: 300%;

    padding-left: 350%;

    margin-left: -20px!important;

    margin-top: -120%;

    opacity: 0;

    transition: all 0.8s

}

.button:active:after {

    padding: 0;

    margin: 0;

    opacity: 1;

    transition: 0s

}

</style>

</head>

<body>

<h2>按钮动画 - 波纹效果</h2>

<button class="button">Click Me</button>

</body>

</html>

移上去加箭头效果

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>加箭头特效</title>

<style>

.button {

  display: inline-block;

  border-radius: 4px;

  background-color: #f4511e;

  border: none;

  color: #FFFFFF;

  text-align: center;

  font-size: 28px;

  padding: 20px;

  width: 200px;

  transition: all 0.5s;

  cursor: pointer;

  margin: 5px;

}

.button span {

  cursor: pointer;

  display: inline-block;

  position: relative;

  transition: 0.5s;

}

.button span:after {

  content: '»';

  position: absolute;

  opacity: 0;

  top: 0;

  right: -20px;

  transition: 0.5s;

}

.button:hover span {

  padding-right: 25px;

}

.button:hover span:after {

  opacity: 1;

  right: 0;

}

</style>

</head>

<body>

<h2>按钮动画</h2>

<button class="button" style="vertical-align:middle"><span>Hover </span></button>

</body>

</html>

　　

button按钮波纹,箭头特效css的更多相关文章

  1. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  2. button 按钮，结合onclick事件，验证和提交表单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

  4. input与button按钮背景图失效不显示的解决办法

    今天做公司的某个网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题,一个平时不会发生的怪事情发生了:为网页代码中的Form表单中的input 和 button 按钮标签在CSS样式 ...

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

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

  6. Kindeditor富文本实现textarea文本域的上传及单独button 按钮绑定(用来实现单文件上传)

    在最近项目要新增一个内容文章,文章包含一般的正文内容,其中正文中可以包含多张图片.文章最多包含一个音频文件.文章正文的上传功能我是通过textarea文本域绑定kindeditor编辑器实现的,而单独 ...

  7. HTML5 Canvas水波纹动画特效

    HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...

  8. 微信小程序组件解读和分析：七、button按钮

    button按钮组件说明: button,顾名思义,按钮,类似于html的button标签.我们可以设置按钮的属性,比如字体颜色大小,背景颜色等,可以给按钮绑定事件,用户点击时会触发事件. butto ...

  9. 如何在MFC界面开发中响应Button按钮的Down和Up事件

    通过尝试有两种方案可以解决这个问题,第一种方案是通过PreTranslateMessage函数在调度消息之前对消息类型进行筛选,第二种方案是重载CButton类,在重载后的类CForTestButto ...

随机推荐

  1. VIM编辑器常用命令

    一.剪切: 1. 欲从当前光标删除至下一个单词,请输入:dw  2. 欲从当前光标删除至当前行末尾,请输入:d$  3. 欲删除整行,请输入:dd //可以使用 dNd删除多行 N代表行数  4. 欲 ...

  2. mysql5.7.10 的源码安装

    mysql 5.7.10的源码安装:http://fyduan.blog.51cto.com/4234935/1729873cmake . -DCMAKE_INSTALL_PREFIX=/usr/lo ...

  3. C++ URLDecode和URLEncode实现——仅限gb2312，非utf8

    转载--http://blog.163.com/zhangjie_0303/blog/static/9908270620148251658993/   #include <iostream> ...

  4. JUnit备忘录

    测试方法不应该有参数 使用junit做测试的时候发现总是报错:Method XXX should have no parameters; 后来发现是因为测试方法里面函数参数

  5. 【BZOJ-1570】BlueMary的旅行 分层建图 + 最大流

    1570: [JSOI2008]Blue Mary的旅行 Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 388  Solved: 212[Submit ...

  6. jmeter测试 常用数据库的性能

    在线程组中设置线程属性,执行次数=线程数*循环次数 本次JOB共插入了5W条记录,从14:56:46开始到15:01:29结束共耗时343s,平均145.8条/s. 同理sql sever:从15:2 ...

  7. 借One-Class-SVM回顾SMO在SVM中的数学推导--记录毕业论文5

    上篇记录了一些决策树算法,这篇是借OC-SVM填回SMO在SVM中的数学推导这个坑. 参考文献: http://research.microsoft.com/pubs/69644/tr-98-14.p ...

  8. fping tcping hping nmap nc

    [root@test ~]# fping -a -g 192.168.40.1 192.168.40.240 |nl   #-a   扫描alive主机,-g扫描一个段的ip地址 [root@test ...

  9. JVM大端判断

    JVM采用大端方式存多字节的数据,判断方法如下: public static void bytesToInt() throws IOException { /** * 将字节数组(byte[])转为整 ...

  10. .net 开源工作流比较及应用

    送上比较内容图: 鉴于这个表的内容,与公司技术与需求的结合,我们选择啦RoadFlow工作流引擎. 下面踏上RoadFlow的征程. RoadFlow的下载.部署.及使用 官方网址:http://cq ...