波纹特效:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>按钮动画 - 波纹效果</title>
  6. <style>
  7. .button {
  8.     position: relative;
  9.     background-color: #4CAF50;
  10.     border: none;
  11.     font-size: 28px;
  12.     color: #FFFFFF;
  13.     padding: 20px;
  14.     width: 200px;
  15.     text-align: center;
  16.     -webkit-transition-duration: 0.4s; /* Safari */
  17.     transition-duration: 0.4s;
  18.     text-decoration: none;
  19.     overflow: hidden;
  20.     cursor: pointer;
  21. }
  22.  
  23. .button:after {
  24.     content: "";
  25.     background: #90EE90;
  26.     display: block;
  27.     position: absolute;
  28.     padding-top: 300%;
  29.     padding-left: 350%;
  30.     margin-left: -20px!important;
  31.     margin-top: -120%;
  32.     opacity: 0;
  33.     transition: all 0.8s
  34. }
  35.  
  36. .button:active:after {
  37.     padding: 0;
  38.     margin: 0;
  39.     opacity: 1;
  40.     transition: 0s
  41. }
  42. </style>
  43. </head>
  44. <body>
  45.  
  46. <h2>按钮动画 - 波纹效果</h2>
  47.  
  48. <button class="button">Click Me</button>
  49.  
  50. </body>
  51. </html>

移上去加箭头效果

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>加箭头特效</title>
  6. <style>
  7. .button {
  8.   display: inline-block;
  9.   border-radius: 4px;
  10.   background-color: #f4511e;
  11.   border: none;
  12.   color: #FFFFFF;
  13.   text-align: center;
  14.   font-size: 28px;
  15.   padding: 20px;
  16.   width: 200px;
  17.   transition: all 0.5s;
  18.   cursor: pointer;
  19.   margin: 5px;
  20. }
  21.  
  22. .button span {
  23.   cursor: pointer;
  24.   display: inline-block;
  25.   position: relative;
  26.   transition: 0.5s;
  27. }
  28.  
  29. .button span:after {
  30.   content: '»';
  31.   position: absolute;
  32.   opacity: 0;
  33.   top: 0;
  34.   right: -20px;
  35.   transition: 0.5s;
  36. }
  37.  
  38. .button:hover span {
  39.   padding-right: 25px;
  40. }
  41.  
  42. .button:hover span:after {
  43.   opacity: 1;
  44.   right: 0;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49.  
  50. <h2>按钮动画</h2>
  51.  
  52. <button class="button" style="vertical-align:middle"><span>Hover </span></button>
  53.  
  54. </body>
  55. </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. C++ 一个例子彻底搞清楚拷贝构造函数和赋值运算符重载的区别

    class TestChild { public: TestChild() { x=; y=; printf("TestChild: Constructor be called!\n&quo ...

  2. 软件工程（FZU2015）赛季得分榜，第八回合

    目录 第一回合 第二回合 第三回合 第四回合 第五回合 第6回合 第7回合 第8回合 第9回合 第10回合 第11回合 积分规则 积分制: 作业为10分制,练习为3分制:alpha30分: 团队项目分 ...

  3. jQuery之Ajax--辅助函数

    1.这些函数用于辅助完成Ajax任务. 2. jQuery.param()方法:创建一个数组或对象序列化的的字符串,适用于一个URL 地址查询字符串或Ajax请求.    我们可以显示一个对象的查询字 ...

  4. zend studio(Eclipse)和PyDev搭建Python开发环境

    原文是用Eclipse作开发环境,由于我已经装了zs,而zs也是基于Eclipse的,一试之下发现可以用,呵呵省事了.原文:http://www.cnblogs.com/Realh/archive/2 ...

  5. js-JavaScript高级程序设计学习笔记21 改善JavaScript性能的方法

    第24章 最佳实践 1.性能 1.避免全局查找 将在一个函数中会用到多次的全局对象保存在局部变量.比如多次使用document.getElement...,可以首先var doc=document,把 ...

  6. python基础3（元祖、字典、深浅copy、集合、文件处理）

    本次内容: 元祖 字典 浅copy和深copy 集合 文件处理 1.1元祖 元祖(tuple)与列表类似,不同之处在于元祖的元素不能修改,元祖使用小括号(),列表使用方括号[].元祖创建很简单,只需要 ...

  7. Kakfa重连测试

    在Kafak已启动的情况下: 发送端首次连接大概耗时400毫秒.后续消息发送都在1毫秒以下. 接收端首次连接大概耗时400-7000毫秒.后续消息接收都在1毫秒以下.(具体时间与topic中存留的消息 ...

  8. XP---------专区(Windows Exprience)--体验的简写

    待完善中 -------------------------------------- 1.0用u盘安装xp系统 用u盘给自己的或者朋友的电脑装上一个系统. 首先当然是下载一个系统文件,下面是本站的最 ...

  9. Java创建对象的几种方法

    有时候,也可能碰到这样面试题,如: Java创建对象有哪几种方法? 除了new之外,java创建对象还有哪几种方式? 本文结合例子,给出几种Java创建对象的方法,Here we go~~~~ 使用n ...

  10. Dell服务器安装OpenManage(OMSA)

    公司上架了一批戴尔服务器,公司要求对这些服务器的硬件做一系列的监控,如CPU的温度,内存,风扇的状态,转速,磁盘等硬件的监控. 在对服务器的硬件监控上,目前业界主要基于如下两种: 1.服务器自带的工具 ...