button按钮波纹,箭头特效css
波纹特效:
<!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.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- button 按钮，结合onclick事件，验证和提交表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 遭遇input与button按钮背景图失效不显示的解决办法
笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...
- input与button按钮背景图失效不显示的解决办法
今天做公司的某个网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题,一个平时不会发生的怪事情发生了:为网页代码中的Form表单中的input 和 button 按钮标签在CSS样式 ...
- 6种炫酷的CSS3按钮边框动画特效
6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...
- Kindeditor富文本实现textarea文本域的上传及单独button 按钮绑定(用来实现单文件上传)
在最近项目要新增一个内容文章,文章包含一般的正文内容,其中正文中可以包含多张图片.文章最多包含一个音频文件.文章正文的上传功能我是通过textarea文本域绑定kindeditor编辑器实现的,而单独 ...
- HTML5 Canvas水波纹动画特效
HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...
- 微信小程序组件解读和分析：七、button按钮
button按钮组件说明: button,顾名思义,按钮,类似于html的button标签.我们可以设置按钮的属性,比如字体颜色大小,背景颜色等,可以给按钮绑定事件,用户点击时会触发事件. butto ...
- 如何在MFC界面开发中响应Button按钮的Down和Up事件
通过尝试有两种方案可以解决这个问题,第一种方案是通过PreTranslateMessage函数在调度消息之前对消息类型进行筛选,第二种方案是重载CButton类,在重载后的类CForTestButto ...
随机推荐
- tomcat远程部署应用
Tomcat安装成功后,在ip地址:8080上就可以看见熟悉的首页,在这个首页中,上方有一个manage app按钮,点击就可以进行应用管理了.这样就不需要使用ftp把war包传上去了. 要想远程部署 ...
- 百度API
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 回顾yii的学习进程 总结了一下的发展过程
如果看到这篇文章,我想说恭喜你 不用,你可以先放下学习yii了 我先学在把结论发给你们节省精力 yii2的学习教程:http://www.digpage.com/recent_update.html ...
- Asp.Net MVC<五>：过滤器
ControllerActionInvoker在执行过程中除了利用ActionDescriptor完成对目标Action方法本身的执行外,还会执行相关过滤器(Filter).过滤器采用AOP的设计,它 ...
- ajax 多个表单值问题，表单序列化加其它表单值
$.ajax({ type: "post", url: "{:u('cart/totalByCard')}?t="+Math.random(9999), dat ...
- 查找树ADT——二叉搜索树
在以下讨论中,虽然任意复杂的关键字都是允许的,但为了简单起见,假设它们都是整数,并且所有的关键字是互异的. 总概 使二叉树成为二叉查找树的性质是,对于树中的每个节点X,它的左子树中所有关键字值小于 ...
- R读取溢出的数据
读取含多位数的数据 1(首选). install.packages("readxl")library(readxl) x<-read_excel("C:\\User ...
- Win7旗舰版-X86-X64-快速装机版
装机版作品简介 Win7 32/64位旗舰版 6.5z 专注于Win7,致力于做更好用的系统!一如既往的品质,不流氓,不欺骗,不夸大!一直在改进,只为做得更好!万千用户的信赖,作者的品质保证! 作品摘 ...
- 轻松理解spring IOC
spring IOC(Inversion of control)即控制反转 概念:一,spring框架的核心之一 二,控制权由对象本身转向容器:由容器根据配置文件去创建实例并创建各个实例之间的依赖关系 ...
- nginx虚拟主机配置小结
nginx的安装在lnmp环境搭建中已经介绍过了,配置文件在安装目录下的conf子目录下,主要主要分成四部分:main(全局设置).server(主机设置).upstream(负载均衡服务器设置).l ...