Google-Ripples/_index.html at master · orlsend/Google-Ripples · 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
<!doctype html>
<html>
	<head>
		<title>Google Ripples effect</title>
		<script src="jquery.js"></script>
		<script src="ripples.js"></script>
		<script>
		$(document).ready(function() {
			Ripples.setup();
		});
		$(window).on("load", function() {
			Ripples.init();
		});
		</script>
		<style>
		button {
			overflow: hidden;
			position: relative;
			width: auto;
			padding: 15px;
			background-color: #5677fc;
			border: 0;
			color: #fff;
			font-size: 12px;
			text-transform: uppercase;
			font-weight: bold;
		}
		</style>
	</head>
	<body>
		<button data-ripple>
			I'm a button with the data-ripple attribute
		</button>

		<div data-ripple>
			I'm a div with the data-ripple-attribute.<br />
			Go ahead and give it a try!
		</div>
	</body>
</html>