js-effect-ripple

Material Design Ripple effect in pure JS & CSS

Demo

click me.

Evn

webpack + babel + scss

Install

npm

$ npm install js-effect-ripple

Usage

<style>
	* {
		margin: 0;
		padding: 0;
		-webkit-appearance:none;
	}

	body {
		padding: 50px;
	}

	div {
		position: relative;
	}

	button {
		position: relative;
		display: block;
		width: 200px;
		height: 50px;
		line-height: 50px;
		margin-bottom: 20px;
		border: none;
		outline: none;
		border-radius: 2px;
		overflow: hidden;
		background-color: #f55;
		color: #fff;
		font-size: 20px;
		cursor: pointer;
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
		user-select: none;
		-webkit-tap-highlight-color: transparent;/*此处为了解决谷歌手机浏览器触摸后按钮带有一层阴影的碍事效果*/
		transform: rotate(0deg); /*此处为了解决谷歌浏览器子元素使用transform元素，父元素圆角溢出无效的bug。无奈火狐依然存在*/
	}

	button:hover {
		box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
	}

	button:active {
		box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.23);
	}

	#btn2 {
		background-color: #fff;
		color: #666;
	}

	#btn3 {
		width: 30px;
		height: 30px;
		line-height: 30px;
		font-size: 18px;
		border-radius: 50%;
		background-color: #fff;
		color: #666;
		overflow: visible;
	}

	#btn4 {
		width: 56px;
		height: 56px;
		line-height: 56px;
		border-radius: 50%;
		background-color: #086;
		font-size: 24px;
		color: #fff;
	}
</style>

<div>
	<button id="btn1" type="button" name="button">submit</button>
	<button id="btn2" type="button" name="button">submit</button>
	<button id="btn3" type="button" name="button">+</button>
	<button id="btn4" type="button" name="button">+</button>
	<button id="btn5" type="button" name="button">see above</button>
</div>

<script>
	import effectRipple from 'js-effect-ripple';

	let btn1 = document.getElementById('btn1'),
		btn2 = document.getElementById('btn2'),
		btn3 = document.getElementById('btn3'),
		btn4 = document.getElementById('btn4'),
		btn5 = document.getElementById('btn5');

	btn1.addEventListener('click', function (e) {
		effectRipple(e);
	});

	btn2.addEventListener('click', function (e) {
		effectRipple(e, {bgc: 'rgba(0, 100, 150, 0.3)'});
	});

	btn3.addEventListener('click', function (e) {
		effectRipple(e, {type: 'center'});
	});

	btn4.addEventListener('click', function (e) {
		effectRipple(e, {type: 'center', bgc: 'rgba(255, 255, 255, 0.4)'});
	});

	btn5.addEventListener('click', function (e) {
		effectRipple(e, {ele: btn1, type: 'center'});
		effectRipple(e, {ele: btn2, type: 'center'});
		effectRipple(e, {ele: btn3, type: 'center'});
		effectRipple(e, {ele: btn4, type: 'center', bgc: 'rgba(255, 255, 255, 0.3)'});
	});
</script>