-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
64 lines (54 loc) · 2.25 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Ripple</title>
<style type="text/css">
/*CSS for Ripple Effect*/
.button {display: inline-block;position: relative;overflow: hidden;}
.ripple {position: absolute;display: inline-block;border-radius: 50%;transition:all .4s;opacity: 0;}
@keyframes animRipple {
0% {transform: scale(1);opacity: .8}
100% {transform: scale(40);opacity: 0}
}
.animateRipple {animation-name: animRipple;animation-duration: 1s;}
/*CSS for Buttons*/
.btn {border-radius:2px;padding:10px 20px;text-decoration: none;font-family:Arial;}
.blueBtn {background:#3AE;color:#FFF;}
.redBtn {background:#FF3A3A;color:#FFF;}
.greenBtn {background:#5CBF13;color:#FFF;}
.yellowBtn {background:#FFD73E;color:#444;}
.whiteBtn {background:#EEE;color:#444;}
</style>
<script type="text/javascript" src="jquery1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".button").mousedown(function(){
/*Removes previously created "ripple" divs*/
$(this).find(".ripple").remove();
/*Adds a new "ripple" div*/
if ($(this).find(".ripple").length == 0) {
$(this).append("<div class='ripple'></div>");
}
/*Setting Width and Height to "ripple" div. The text color of the button is also set as the background color of the "ripple" div*/
var thsWd = $(this).outerWidth();
var thsHt = $(this).outerHeight();
var ripleDim = Math.max(thsWd,thsHt)/20;
var ripplebg = $(this).css("color");
$(this).find(".ripple").height(ripleDim).width(ripleDim).css("background-color",ripplebg);
/*Setting the position of the "ripple" div. The "animateRipple" class is added to initiate the ripple animation*/
$(this).find(".ripple").css({
"top":event.pageY-$(this).offset().top,
"left":event.pageX-$(this).offset().left,
}).addClass("animateRipple");
});
});
</script>
</head>
<body>
<a href="javascript:;" class="button btn blueBtn">Button</a>
<a href="javascript:;" class="button btn redBtn">Button</a>
<a href="javascript:;" class="button btn greenBtn">Button</a>
<a href="javascript:;" class="button btn yellowBtn">Button</a>
<a href="javascript:;" class="button btn whiteBtn">Button</a>
</body>
</html>