Skip to content

Commit 100a2b0

Browse files
codingstellacodingstella
authored
Add files via upload
1 parent 2a8a7d9 commit 100a2b0

File tree

55 files changed

+4028
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+4028
-0
lines changed

‎Button Ripple Effect/dist/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CodePen - Button Ripple Effect</title>
6+
<link rel="stylesheet" href="./style.css">
7+
8+
</head>
9+
<body>
10+
<!-- partial:index.partial.html -->
11+
<button class="ripple-btn">Click Here</button>
12+
<!-- partial -->
13+
<script src="./script.js"></script>
14+
15+
</body>
16+
</html>

‎Button Ripple Effect/dist/script.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const button = document.querySelector(".ripple-btn");
2+
3+
button.addEventListener("click", drawRipple);
4+
5+
function drawRipple(event) {
6+
const x = event.clientX - event.target.offsetLeft;
7+
const y = event.clientY - event.target.offsetTop;
8+
9+
const ripples = document.createElement("span");
10+
ripples.style.left = x + "px";
11+
ripples.style.top = y + "px";
12+
13+
this.appendChild(ripples);
14+
15+
setTimeout(() => {
16+
ripples.remove();
17+
}, 1000);
18+
}

‎Button Ripple Effect/dist/style.css

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
*,
2+
::before,
3+
::after {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
body {
10+
display: flex;
11+
justify-content: center;
12+
min-height: 100vh;
13+
align-items: center;
14+
background: #121212;
15+
}
16+
17+
.ripple-btn {
18+
position: relative;
19+
padding: 1em 1.5em;
20+
color: #fff;
21+
font-size: 1.15rem;
22+
border-radius: 100vmax;
23+
background-color: transparent;
24+
border: 2px solid #fff;
25+
text-transform: uppercase;
26+
overflow: hidden;
27+
cursor: pointer;
28+
}
29+
30+
span {
31+
position: absolute;
32+
border-radius: 50%;
33+
font-size: 10px;
34+
opacity: 0.5;
35+
width: 20em;
36+
height: 20em;
37+
background: linear-gradient(90deg, #0162c8, #55e7fc);
38+
transform: translate(-50%, -50%) scale(0);
39+
animation: animate 1s linear infinite;
40+
pointer-events: none;
41+
}
42+
43+
@keyframes animate {
44+
100% {
45+
opacity: 0;
46+
transform: translate(-50%, -50%) scale(1);
47+
}
48+
}

‎Creative Link Hover/dist/index.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CodePen - Three Fancy Link Hover Effects</title>
6+
<link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet"> <link rel="stylesheet" href="./style.css">
7+
8+
</head>
9+
<body>
10+
<!-- partial:index.partial.html -->
11+
<div class="background-one">
12+
<div class="link-container">
13+
<a class="link-one" href="#">Three</a>
14+
</div>
15+
</div>
16+
<div class="background-two link-container">
17+
<a class="link-two" href="#">Fancy</a>
18+
</div>
19+
<div class="background-three link-container">
20+
<a class="link-three" href="#">Links</a>
21+
</div>
22+
<!-- partial -->
23+
24+
</body>
25+
</html>

‎Creative Link Hover/dist/style.css

+228
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
body {
2+
margin: 0;
3+
height: 100vh;
4+
display: grid;
5+
grid-template-columns: repeat(3, 1fr);
6+
grid-template-rows: 1fr;
7+
}
8+
9+
.background-one {
10+
background-color: #151515;
11+
}
12+
13+
.background-two {
14+
background-color: #151515;
15+
}
16+
17+
.background-three {
18+
background-color: #151515;
19+
}
20+
21+
.link-container {
22+
display: flex;
23+
flex-direction: column;
24+
justify-content: center;
25+
align-items: center;
26+
height: 100%;
27+
position: relative;
28+
z-index: 0;
29+
}
30+
31+
a {
32+
font-family: "Bungee", cursive;
33+
font-size: 2.5em;
34+
}
35+
36+
.link-one {
37+
color: #53d9d1;
38+
transition: color 1s cubic-bezier(0.32, 0, 0.67, 0);
39+
line-height: 1em;
40+
}
41+
42+
.link-one:hover {
43+
color: #111;
44+
transition: color 1s cubic-bezier(0.33, 1, 0.68, 1);
45+
}
46+
47+
.link-one::before {
48+
content: "";
49+
position: absolute;
50+
z-index: -1;
51+
width: 100%;
52+
height: 100%;
53+
top: 0;
54+
right: 0;
55+
background-color: #53d9d1;
56+
57+
clip-path: circle(0% at 50% calc(50%));
58+
transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);
59+
}
60+
61+
.link-one:hover::before {
62+
clip-path: circle(100% at 50% 50%);
63+
}
64+
65+
.link-one::after {
66+
content: "";
67+
position: absolute;
68+
z-index: -1;
69+
width: 100%;
70+
height: 100%;
71+
top: 0;
72+
right: 0;
73+
background-color: #151515;
74+
75+
clip-path: polygon(
76+
40% 0%,
77+
60% 0%,
78+
60% 0%,
79+
40% 0%,
80+
40% 100%,
81+
60% 100%,
82+
60% 100%,
83+
40% 100%
84+
);
85+
86+
transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);
87+
}
88+
89+
.link-one:hover::after {
90+
clip-path: polygon(
91+
40% 10%,
92+
60% 10%,
93+
60% 35%,
94+
40% 35%,
95+
40% 90%,
96+
60% 90%,
97+
60% 65%,
98+
40% 65%
99+
);
100+
}
101+
102+
.link-two {
103+
color: #f27b9b;
104+
transition: color 1s cubic-bezier(0.32, 0, 0.67, 0);
105+
}
106+
107+
.link-two:hover {
108+
color: #111;
109+
transition: color 1s cubic-bezier(0.33, 1, 0.68, 1);
110+
}
111+
112+
.link-two::before {
113+
content: "";
114+
position: absolute;
115+
z-index: -2;
116+
width: 100%;
117+
height: 100%;
118+
top: 0;
119+
right: 0;
120+
clip-path: polygon(
121+
0% -20%,
122+
100% -30%,
123+
100% -10%,
124+
0% 0%,
125+
0% 130%,
126+
100% 120%,
127+
100% 100%,
128+
0% 110%
129+
);
130+
background-color: #f27b9b;
131+
132+
transition: clip-path 1s cubic-bezier(0.25, 1, 0.5, 1);
133+
}
134+
135+
.link-two:hover::before {
136+
clip-path: polygon(
137+
0% 10%,
138+
100% 0%,
139+
100% 20%,
140+
0% 30%,
141+
0% 100%,
142+
100% 90%,
143+
100% 70%,
144+
0% 80%
145+
);
146+
}
147+
148+
.link-two::after {
149+
content: "";
150+
position: absolute;
151+
z-index: -1;
152+
width: 5ch;
153+
height: 5ch;
154+
top: 50%;
155+
right: 50%;
156+
transform: translate(50%, -50%) rotate(0deg) scale(0);
157+
transition: transform 1s ease;
158+
159+
background-color: #f27b9b;
160+
}
161+
162+
.link-two:hover::after {
163+
transform: translate(50%, -50%) rotate(135deg) scale(1);
164+
}
165+
166+
.link-three {
167+
color: #eb7132;
168+
}
169+
170+
.link-three::after {
171+
content: "";
172+
position: absolute;
173+
z-index: 2;
174+
width: 50%;
175+
height: 100%;
176+
top: 0%;
177+
left: 0%;
178+
transform: translate(0, -50%) scaleY(0);
179+
transition: transform 1s ease;
180+
mix-blend-mode: difference;
181+
182+
clip-path: polygon(
183+
20% 60%,
184+
100% 60%,
185+
100% 40%,
186+
20% 40%,
187+
20% 0%,
188+
60% 0%,
189+
60% 20%,
190+
20% 20%
191+
);
192+
193+
background-color: #eb7132;
194+
}
195+
196+
.link-three:hover::after {
197+
transform: translate(0, 0%) scaleY(1);
198+
}
199+
200+
.link-three::before {
201+
content: "";
202+
position: absolute;
203+
z-index: 2;
204+
width: 50%;
205+
height: 100%;
206+
bottom: 0%;
207+
right: 0%;
208+
transform: translate(0, 50%) scaleY(0);
209+
transition: transform 1s ease;
210+
mix-blend-mode: difference;
211+
212+
clip-path: polygon(
213+
80% 40%,
214+
0% 40%,
215+
0% 60%,
216+
80% 60%,
217+
80% 100%,
218+
40% 100%,
219+
40% 80%,
220+
80% 80%
221+
);
222+
223+
background-color: #eb7132;
224+
}
225+
226+
.link-three:hover::before {
227+
transform: translate(0%, 0%) scaleY(1);
228+
}

0 commit comments

Comments
 (0)