通用按钮点击特效

网站中的按钮常用按钮通用特效，
首先按钮可以随意自己写样式

			
按钮特效

	.box {
				width: 300px;
				height:100px;
				background: darkblue;
				margin: 200px auto;
				border-radius: 20px;
			}
			.box p{
				text-align: center;
				line-height: 60px;
				color: #fff;	
			}

不管你这么写 只要你加上 waves这个类 然后又添加js

document.addEventListener("DOMContentLoaded", function() {
			var duration = 600;//显示特效时间 
			var forStyle = function(position) {
				var cssStr = "";
				for(var key in position) {
					if(position.hasOwnProperty(key)) {
						cssStr += key + ":" + position[key] + ";"
					}
				}
				return cssStr
			};
			var forRect = function(target) {
				var position = {
						top: 0,
						left: 0
					},
					ele = document.documentElement;
				"undefined" != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());
				return {
					top: position.top + window.pageYOffset - ele.clientTop,
					left: position.left + window.pageXOffset - ele.clientLeft
				}
			};
			var show = function(event) {
				var pDiv = event.target,
					cDiv = document.createElement("div");
				pDiv.appendChild(cDiv);
				var rectObj = forRect(pDiv),
					_height = event.pageY - rectObj.top,
					_left = event.pageX - rectObj.left,
					_scale = "scale(" + pDiv.clientWidth / 100 * 10 + ")";
				var position = {
					top: _height + "px",
					left: _left + "px"
				};
				cDiv.className = cDiv.className + " waves-animation", cDiv.setAttribute("style", forStyle(position)), position["-webkit-transform"] = _scale, position["-moz-transform"] = _scale, position["-ms-transform"] = _scale, position["-o-transform"] = _scale, position.transform = _scale, position.opacity = "1", position["-webkit-transition-duration"] = duration + "ms", position["-moz-transition-duration"] = duration + "ms", position["-o-transition-duration"] = duration + "ms", position["transition-duration"] = duration + "ms", position["-webkit-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", position["-moz-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", position["-o-transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", position["transition-timing-function"] = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", cDiv.setAttribute("style", forStyle(position));
				var finishStyle = {
					opacity: 0,
					"-webkit-transition-duration": duration + "ms",
					"-moz-transition-duration": duration + "ms",
					"-o-transition-duration": duration + "ms",
					"transition-duration": duration + "ms",
					"-webkit-transform": _scale,
					"-moz-transform": _scale,
					"-ms-transform": _scale,
					"-o-transform": _scale,
					top: _height + "px",
					left: _left + "px",
				};
				setTimeout(function() {
					cDiv.setAttribute("style", forStyle(finishStyle));
					setTimeout(function() {
						pDiv.removeChild(cDiv)
					}, duration)
				}, 100)
			};
			document.querySelector(".waves").addEventListener("click", function(e) {
				show(e)
			}, !1)
		}, !1);

完整案例

	
		
		
		
	

	
		

			
按钮特效