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 ...
随机推荐
- Bootstrap使用后笔记
Bootstrap Modal 垂直居中 在 bootstrap.js中修改如下代码: Modal.prototype.adjustDialog = function () { var modal ...
- C#-WebForm-表单元素
表单元素共12个,分三大类: 文本类: <input type="text" /> - 文本框 <input type="password" ...
- AOPR软件最小化消失了
结合日常使用软件的经历,我们都是选择最小化按钮后,点击状态栏中最小化图标即可恢复软件窗口.在使用Advanced Office Password Recovery的过程中,有时会出现点击最小化按钮后在 ...
- NCBI database download
ascp -T -l 200M -i ~/.aspera/connect/etc/asperaweb_id_dsa.openssh --host=ftp-private.ncbi.nlm.nih.go ...
- input-placeholder
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #f00; } ::-moz-placeholder { /* Mozilla Fir ...
- nginx中将POST数据写到日志里面的正确方式
http://www.cnblogs.com/meteorx/p/3188647.html
- CDN的combo技术能把多个资源文件合并引用，减少请求次数
CDN的combo技术能把多个资源文件合并引用,减少请求次数.比如淘宝的写法: <link rel="stylesheet" href="//g.alicdn.co ...
- ReSharper 配置及用法
1:安装后,Resharper会用他自己的英文智能提示,替换掉 vs2010的智能提示,所以我们要换回到vs2010的智能提示 2:快捷键.是使用vs2010的快捷键还是使用 Resharper的快捷 ...
- Java细粒度锁实现的3种方式
最近在工作上碰见了一些高并发的场景需要加锁来保证业务逻辑的正确性,并且要求加锁后性能不能受到太大的影响.初步的想法是通过数据的时间戳,id等关键字来加锁,从而保证不同类型数据处理的并发性.而java自 ...
- PDFobject插件使用，PDF在线查看插件
1.引入插件JS <script type="text/javascript" src="PDFobject.js"></script> ...