JavascriptMetarialButton/customMetarialButton.html at master · sayed021/JavascriptMetarialButton · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		button {
			width: 300px;
			height: 50px;
		}
		[data-metarialbutton],
		[metarialbutton] {
			outline: 0;
			border: 0;
			cursor: pointer;
			overflow: hidden;
			position: relative;
		}
		[data-metarialbutton] .overlay,
		[metarialbutton] .overlay {
			position: absolute;
			width: 0;
			height: 0;
			background: red;
			z-index: 1;
			transition: 0.3s;
			opacity: 0.2;
			border-radius: 100%;
		}
		[data-metarialbutton] .overlay.animated,
		[metarialbutton] .overlay.animated {
			transform: scale(10);
		}
	</style>
</head>
<body>

	<div metarialbutton style="position: fixed; width: 100%; height: 100%; background: #eee;">

	</div>

	<button  metarialbutton>click me 1!</button>
	<button data-metarialbutton>click me 2!</button>


	<script src="http://code.jquery.com/jquery-3.3.1.min.js"integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

	<script>
		jQuery(document).ready(function() {
			jQuery(document).on('click', '[data-metarialbutton] , [metarialbutton]', function(e) {
				e.preventDefault();
				$(this).append('<scpan class="overlay" style="left:'+event.offsetX  +'px; top:'+event.offsetY+'px;"></span>');

				$(this).find('.overlay').addClass('animated');
				$(this).find('.overlay').animate({
					width: $(this).width(),
					height: $(this).width(),
					opacity: 0
				}, 300, function() {
					var thisElement = $(this);
					setTimeout(function(){
						thisElement.remove();
					},200);
				});
			});
		});
	</script>

</body>
</html>