Skip to content

Commit 1a83e8a

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 40
1 parent e17c91b commit 1a83e8a

1 file changed

Lines changed: 163 additions & 0 deletions

File tree

‎public/40/index.html‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="icon" href="/assets/icon.png" />
7+
<title>Day 40/100</title>
8+
</head>
9+
<body>
10+
<main>
11+
<button type="button" class="button" id="button">
12+
<div class="button-background"></div>
13+
<div class="button-text">Get Started</div>
14+
<svg
15+
class="button-icon"
16+
version="1.1"
17+
xmlns="http://www.w3.org/2000/svg"
18+
xmlns:xlink="http://www.w3.org/1999/xlink"
19+
viewBox="0 0 12.5093 17.5529"
20+
>
21+
<g>
22+
<rect height="17.5529" opacity="0" width="12.5093" x="0" y="0" />
23+
<path
24+
d="M12.5093 8.77158C12.5031 8.37216 12.3588 8.03887 12.0366 7.72645L4.52897 0.371912C4.27244 0.12205 3.97065 0 3.60184 0C2.874 0 2.28152 0.579605 2.28152 1.31101C2.28152 1.67005 2.42886 2.00335 2.6938 2.26873L9.37463 8.76847L2.6938 15.2744C2.43197 15.5367 2.28152 15.8664 2.28152 16.2353C2.28152 16.9635 2.874 17.5463 3.60184 17.5463C3.96444 17.5463 4.27244 17.4242 4.52897 17.1677L12.0366 9.8167C12.3619 9.49762 12.5093 9.16788 12.5093 8.77158Z"
25+
/>
26+
</g>
27+
</svg>
28+
</button>
29+
</main>
30+
31+
<style>
32+
@font-face {
33+
font-family: "SpaceMono";
34+
src: url("/assets/SpaceMono-Bold.woff2") format("woff2");
35+
font-weight: 700;
36+
}
37+
38+
:root {
39+
--mouse-x: 50%;
40+
--mouse-y: 50%;
41+
}
42+
43+
body {
44+
margin: 0;
45+
overflow: hidden;
46+
display: flex;
47+
justify-content: center;
48+
align-items: center;
49+
width: 100vw;
50+
height: 100vh;
51+
background-color: #000;
52+
}
53+
54+
main {
55+
width: 100vw;
56+
max-width: 300px;
57+
height: 100vh;
58+
display: flex;
59+
flex-direction: column;
60+
align-items: center;
61+
justify-content: center;
62+
}
63+
64+
.button {
65+
position: relative;
66+
cursor: pointer;
67+
border: none;
68+
background-color: transparent;
69+
display: flex;
70+
align-items: center;
71+
justify-content: center;
72+
border-radius: 100px;
73+
outline: 3px solid #fff;
74+
outline-offset: -3px;
75+
gap: 10px;
76+
padding: 15px;
77+
padding-left: 25px;
78+
padding-right: 20px;
79+
80+
transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out;
81+
}
82+
83+
.button:hover {
84+
outline: 6px solid transparent;
85+
outline-offset: 6px;
86+
}
87+
88+
.button-text {
89+
color: #fff;
90+
font-family: "SpaceMono", monospace;
91+
font-weight: 700;
92+
font-size: 20px;
93+
z-index: 2;
94+
95+
transition: color 0.3s ease-in-out;
96+
}
97+
98+
.button:hover .button-text {
99+
color: #000;
100+
}
101+
102+
.button-icon {
103+
width: 20px;
104+
height: 20px;
105+
fill: #fff;
106+
z-index: 2;
107+
108+
transition: fill 0.3s ease-in-out;
109+
}
110+
111+
.button:hover .button-icon {
112+
fill: #000;
113+
}
114+
115+
.button-background {
116+
position: absolute;
117+
top: 50%;
118+
left: 50%;
119+
translate: -50% -50%;
120+
width: 100%;
121+
height: 100%;
122+
background-color: #fff;
123+
transform-origin: var(--mouse-x) var(--mouse-y);
124+
scale: 0;
125+
z-index: 1;
126+
border-radius: 100px;
127+
128+
transition: scale 0.3s ease-in-out;
129+
}
130+
131+
.button:hover .button-background {
132+
scale: 1;
133+
}
134+
</style>
135+
136+
<script>
137+
const button = document.getElementById("button");
138+
139+
button.onmouseenter = (event) => {
140+
const rect = button.getBoundingClientRect();
141+
const x = (event.clientX - rect.left) / rect.width;
142+
const y = (event.clientY - rect.top) / rect.height;
143+
144+
document.documentElement.style.setProperty("--mouse-x", `${x * 100}%`);
145+
document.documentElement.style.setProperty("--mouse-y", `${y * 100}%`);
146+
};
147+
148+
button.onmousemove = (event) => {
149+
const rect = button.getBoundingClientRect();
150+
const x = (event.clientX - rect.left) / rect.width;
151+
const y = (event.clientY - rect.top) / rect.height;
152+
153+
document.documentElement.style.setProperty("--mouse-x", `${x * 100}%`);
154+
document.documentElement.style.setProperty("--mouse-y", `${y * 100}%`);
155+
};
156+
157+
// button.onmouseleave = () => {
158+
// document.documentElement.style.setProperty("--mouse-x", "50%");
159+
// document.documentElement.style.setProperty("--mouse-y", "50%");
160+
// };
161+
</script>
162+
</body>
163+
</html>

0 commit comments

Comments
 (0)