forked from fireship-io/animated-svg-demo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbutton.html
83 lines (75 loc) · 2.29 KB
/
button.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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Animated SVG Button</title>
<style>
:root {
--dark-color: #635bff;
--light-color: #80e9ff;
}
svg {
cursor: pointer;
}
#darkGroup {
fill: var(--dark-color);
}
#lightGroup {
fill: var(--light-color);
}
#dark1,
#light1,
#dark2 {
transition: all 1s ease;
}
#dark2 {
transform: translateX(-100%);
}
svg:hover #light1 {
transform: translateX(20%);
}
svg:hover #dark1 {
transform: translateX(40%);
opacity: 0;
}
svg:hover #dark2 {
transform: translateX(0%);
}
</style>
</head>
<body>
<svg width="120" height="100" viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="triangles">
<g id="lightGroup">
<path
id="light1"
opacity="0.6"
d="M53.4872 46.3509C55.7436 47.6536 55.7436 50.9105 53.4872 52.2132L13.718 75.174C11.4615 76.4767 8.64104 74.8483 8.64104 72.2428L8.64104 26.3213C8.64104 23.7158 11.4616 22.0874 13.718 23.3901L53.4872 46.3509Z"
/>
</g>
<g id="darkGroup">
<path
id="dark1"
opacity="0.8"
d="M74.9231 46.915C77.1795 48.2177 77.1795 51.4746 74.9231 52.7773L34.3077 76.2266C32.0513 77.5294 29.2308 75.9009 29.2308 73.2955L29.2308 26.3968C29.2308 23.7914 32.0513 22.1629 34.3077 23.4657L74.9231 46.915Z"
/>
<path
id="dark2"
opacity="0.8"
d="M54.6154 46.915C56.8718 48.2177 56.8718 51.4746 54.6154 52.7773L14 76.2266C11.7436 77.5294 8.92307 75.9009 8.92307 73.2955L8.92308 26.3968C8.92308 23.7914 11.7436 22.1629 14 23.4657L54.6154 46.915Z"
/>
</g>
</g>
</svg>
<script>
const svg = document.getElementById('triangles');
svg.onclick = (e) => {
const colors = ['red', 'blue', 'green', 'orange', 'pink', 'purple']
const rando = () => colors[Math.floor(Math.random() * colors.length)];
document.documentElement.style.cssText = `
--dark-color: ${rando()};
--light-color: ${rando()};
`
}
</script>
</body>
</html>