Skip to content

Commit 7bb6c59

Browse files
solygambassolygambas
committed
add button ripple effect
1 parent 9763590 commit 7bb6c59

File tree

4 files changed

+137
-21
lines changed

4 files changed

+137
-21
lines changed

‎20-button ripple effect/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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="stylesheet" href="style.css" />
7+
<title>Button Ripple Effect</title>
8+
</head>
9+
<body>
10+
<button class="ripple">Click Me <span class="circle"></span></button>
11+
<script src="script.js"></script>
12+
</body>
13+
</html>

‎20-button ripple effect/script.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const buttons = document.querySelectorAll(".ripple");
2+
3+
buttons.forEach((button) => {
4+
button.addEventListener("click", function (e) {
5+
const x = e.clientX;
6+
const y = e.clientY;
7+
const buttonTop = e.target.offsetTop;
8+
const buttonLeft = e.target.offsetLeft;
9+
const xInside = x - buttonLeft;
10+
const yInside = y - buttonTop;
11+
const circle = document.createElement("span");
12+
circle.classList.add("circle");
13+
circle.style.top = yInside + "px";
14+
circle.style.left = xInside + "px";
15+
this.appendChild(circle);
16+
setTimeout(() => circle.remove(), 500);
17+
});
18+
});

‎20-button ripple effect/style.css

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #000;
9+
font-family: "Roboto", sans-serif;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
justify-content: center;
14+
height: 100vh;
15+
overflow: hidden;
16+
margin: 0;
17+
}
18+
19+
button {
20+
background-color: purple;
21+
color: #fff;
22+
border: 1px purple solid;
23+
font-size: 14px;
24+
text-transform: uppercase;
25+
letter-spacing: 2px;
26+
padding: 20px 30px;
27+
overflow: hidden;
28+
margin: 10px 0;
29+
position: relative;
30+
cursor: pointer;
31+
}
32+
33+
button:focus {
34+
outline: none;
35+
}
36+
37+
button .circle {
38+
position: absolute;
39+
background-color: #fff;
40+
width: 100px;
41+
height: 100px;
42+
border-radius: 50%;
43+
transform: translate(-50%, -50%) scale(0);
44+
animation: ripple 0.5s ease-out;
45+
}
46+
47+
@keyframes ripple {
48+
to {
49+
transform: translate(-50%, -50%) scale(3);
50+
opacity: 0;
51+
}
52+
}

‎README.md

Lines changed: 54 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,59 @@
22

33
50+ mini web projects using HTML, CSS and JavaScript.
44

5-
| # | Project | Live Demo |
6-
| :-: | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
7-
| 01 | [Expanding Cards](https://github.com/solygambas/html-css-fifty-projects/tree/master/01-expanding%20cards) | [Live Demo](https://codepen.io/solygambas/pen/qBaMWjE) |
8-
| 02 | [Progress Steps](https://github.com/solygambas/html-css-fifty-projects/tree/master/02-progress%20steps) | [Live Demo](https://codepen.io/solygambas/pen/VwKGzzg) |
9-
| 03 | [Rotating Navigation Animation](https://github.com/solygambas/html-css-fifty-projects/tree/master/03-rotating%20navigation) | [Live Demo](https://codepen.io/solygambas/pen/jOMvZqY) |
10-
| 04 | [Hidden Search Widget](https://github.com/solygambas/html-css-fifty-projects/tree/master/04-hidden%20search%20widget) | [Live Demo](https://codepen.io/solygambas/pen/mdrzdPB) |
11-
| 05 | [Blurry Loading](https://github.com/solygambas/html-css-fifty-projects/tree/master/05-blurry%20loading) | [Live Demo](https://codepen.io/solygambas/pen/WNGaNgB) |
12-
| 06 | [Scroll Animation](https://github.com/solygambas/html-css-fifty-projects/tree/master/06-scroll%20animation) | [Live Demo](https://codepen.io/solygambas/pen/JjRmoWL) |
13-
| 07 | [Split Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/07-split%20landing%20page) | [Live Demo](https://codepen.io/solygambas/pen/KKgGdmY) |
14-
| 08 | [Form Wave](https://github.com/solygambas/html-css-fifty-projects/tree/master/08-form%20wave%20animation) | [Live Demo](https://codepen.io/solygambas/pen/Exgdegm) |
15-
| 09 | [Sound Board](https://github.com/solygambas/html-css-fifty-projects/tree/master/09-sound%20board) | [Live Demo](https://codepen.io/solygambas/pen/oNzaPQa) |
16-
| 10 | [Dad Jokes](https://github.com/solygambas/html-css-fifty-projects/tree/master/10-dad%20jokes) | [Live Demo](https://codepen.io/solygambas/pen/gOwBQZK) |
17-
| 11 | [Event Keycodes](https://github.com/solygambas/html-css-fifty-projects/tree/master/11-event%20KeyCodes) | [Live Demo](https://codepen.io/solygambas/pen/zYKmypd) |
18-
| 12 | [Faq Collapse](https://github.com/solygambas/html-css-fifty-projects/tree/master/12-FAQ%20collapse) | [Live Demo](https://codepen.io/solygambas/pen/ExgdqWm) |
19-
| 13 | [Random Choice Picker](https://github.com/solygambas/html-css-fifty-projects/tree/master/13-random%20choice%20picker) | [Live Demo](https://codepen.io/solygambas/pen/eYdQgqN) |
20-
| 14 | [Animated Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/14-animated%20navigation) | [Live Demo](https://codepen.io/solygambas/pen/KKgrWGz) |
21-
| 15 | [Incrementing Counter](https://github.com/solygambas/html-css-fifty-projects/tree/master/15-incrementing%20counter) | [Live Demo](https://codepen.io/solygambas/pen/qBaQmeW) |
22-
| 16 | [Drink Water](https://github.com/solygambas/html-css-fifty-projects/tree/master/16-drink%20water) | [Live Demo](https://codepen.io/solygambas/details/yLaQoJy) |
23-
| 17 | [Movie App](https://github.com/solygambas/html-css-fifty-projects/tree/master/17-movie%20app) | [Live Demo](https://codepen.io/solygambas/pen/mdrabXd) |
24-
| 18 | [Background Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/18-background%20slider) | [Live Demo](https://codepen.io/solygambas/pen/OJRrVbJ) |
25-
| 19 | [Theme Clock](https://github.com/solygambas/html-css-fifty-projects/tree/master/19-theme%20clock) | [Live Demo](https://codepen.io/solygambas/pen/MWjZrZy) |
5+
[See all projects on CodePen](https://codepen.io/solygambas)
6+
7+
| # | Project | Live Demo |
8+
| :-: | ------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------- |
9+
| 01 | [Expanding Cards](https://github.com/solygambas/html-css-fifty-projects/tree/master/01-expanding%20cards) | [Live Demo](https://codepen.io/solygambas/pen/qBaMWjE) |
10+
| 02 | [Progress Steps](https://github.com/solygambas/html-css-fifty-projects/tree/master/02-progress%20steps) | [Live Demo](https://codepen.io/solygambas/pen/VwKGzzg) |
11+
| 03 | [Rotating Navigation Animation](https://github.com/solygambas/html-css-fifty-projects/tree/master/03-rotating%20navigation) | [Live Demo](https://codepen.io/solygambas/pen/jOMvZqY) |
12+
| 04 | [Hidden Search Widget](https://github.com/solygambas/html-css-fifty-projects/tree/master/04-hidden%20search%20widget) | [Live Demo](https://codepen.io/solygambas/pen/mdrzdPB) |
13+
| 05 | [Blurry Loading](https://github.com/solygambas/html-css-fifty-projects/tree/master/05-blurry%20loading) | [Live Demo](https://codepen.io/solygambas/pen/WNGaNgB) |
14+
| 06 | [Scroll Animation](https://github.com/solygambas/html-css-fifty-projects/tree/master/06-scroll%20animation) | [Live Demo](https://codepen.io/solygambas/pen/JjRmoWL) |
15+
| 07 | [Split Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/07-split%20landing%20page) | [Live Demo](https://codepen.io/solygambas/pen/KKgGdmY) |
16+
| 08 | [Form Wave](https://github.com/solygambas/html-css-fifty-projects/tree/master/08-form%20wave%20animation) | [Live Demo](https://codepen.io/solygambas/pen/Exgdegm) |
17+
| 09 | [Sound Board](https://github.com/solygambas/html-css-fifty-projects/tree/master/09-sound%20board) | [Live Demo](https://codepen.io/solygambas/pen/oNzaPQa) |
18+
| 10 | [Dad Jokes](https://github.com/solygambas/html-css-fifty-projects/tree/master/10-dad%20jokes) | [Live Demo](https://codepen.io/solygambas/pen/gOwBQZK) |
19+
| 11 | [Event Keycodes](https://github.com/solygambas/html-css-fifty-projects/tree/master/11-event%20KeyCodes) | [Live Demo](https://codepen.io/solygambas/pen/zYKmypd) |
20+
| 12 | [Faq Collapse](https://github.com/solygambas/html-css-fifty-projects/tree/master/12-FAQ%20collapse) | [Live Demo](https://codepen.io/solygambas/pen/ExgdqWm) |
21+
| 13 | [Random Choice Picker](https://github.com/solygambas/html-css-fifty-projects/tree/master/13-random%20choice%20picker) | [Live Demo](https://codepen.io/solygambas/pen/eYdQgqN) |
22+
| 14 | [Animated Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/14-animated%20navigation) | [Live Demo](https://codepen.io/solygambas/pen/KKgrWGz) |
23+
| 15 | [Incrementing Counter](https://github.com/solygambas/html-css-fifty-projects/tree/master/15-incrementing%20counter) | [Live Demo](https://codepen.io/solygambas/pen/qBaQmeW) |
24+
| 16 | [Drink Water](https://github.com/solygambas/html-css-fifty-projects/tree/master/16-drink%20water) | [Live Demo](https://codepen.io/solygambas/details/yLaQoJy) |
25+
| 17 | [Movie App](https://github.com/solygambas/html-css-fifty-projects/tree/master/17-movie%20app) | [Live Demo](https://codepen.io/solygambas/pen/mdrabXd) |
26+
| 18 | [Background Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/18-background%20slider) | [Live Demo](https://codepen.io/solygambas/pen/OJRrVbJ) |
27+
| 19 | [Theme Clock](https://github.com/solygambas/html-css-fifty-projects/tree/master/19-theme%20clock) | [Live Demo](https://codepen.io/solygambas/pen/MWjZrZy) |
28+
| 20 | [Button Ripple Effect](https://github.com/solygambas/html-css-fifty-projects/tree/master/20-button%20ripple%20effect) | [Live Demo](https://codepen.io/solygambas/pen/oNzJdWw) |
29+
| 21 | [Drag N Drop](https://github.com/solygambas/html-css-fifty-projects/tree/master/drag-n-drop) | [Live Demo](/drag-n-drop/) |
30+
| 22 | [Drawing App](https://github.com/solygambas/html-css-fifty-projects/tree/master/drawing-app) | [Live Demo](/drawing-app/) |
31+
| 23 | [Kinetic Loader](https://github.com/solygambas/html-css-fifty-projects/tree/master/kinetic-loader) | [Live Demo](/kinetic-loader/) |
32+
| 24 | [Content Placeholder](https://github.com/solygambas/html-css-fifty-projects/tree/master/content-placeholder) | [Live Demo](/content-placeholder/) |
33+
| 25 | [Sticky Navbar](https://github.com/solygambas/html-css-fifty-projects/tree/master/sticky-navigation) | [Live Demo](/sticky-navbar/) |
34+
| 26 | [Double Vertical Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/double-vertical-slider) | [Live Demo](/double-vertical-slider/) |
35+
| 27 | [Toast Notification](https://github.com/solygambas/html-css-fifty-projects/tree/master/toast-notification) | [Live Demo](/toast-notification/) |
36+
| 28 | [Github Profiles](https://github.com/solygambas/html-css-fifty-projects/tree/master/github-profiles) | [Live Demo](/github-profiles/) |
37+
| 29 | [Double Click Heart](https://github.com/solygambas/html-css-fifty-projects/tree/master/double-click-heart) | [Live Demo](/double-click-heart/) |
38+
| 30 | [Auto Text Effect](https://github.com/solygambas/html-css-fifty-projects/tree/master/auto-text-effect) | [Live Demo](/auto-text-effect/) |
39+
| 31 | [Password Generator](https://github.com/solygambas/html-css-fifty-projects/tree/master/password-generator) | [Live Demo](/password-generator/) |
40+
| 32 | [Good Cheap Fast](https://github.com/solygambas/html-css-fifty-projects/tree/master/good-cheap-fast) | [Live Demo](/good-cheap-fast/) |
41+
| 33 | [Notes App](https://github.com/solygambas/html-css-fifty-projects/tree/master/notes-app) | [Live Demo](/notes-app/) |
42+
| 34 | [Animated Countdown](https://github.com/solygambas/html-css-fifty-projects/tree/master/animated-countdown) | [Live Demo](/animated-countdown/) |
43+
| 35 | [Image Carousel](https://github.com/solygambas/html-css-fifty-projects/tree/master/image-carousel) | [Live Demo](/image-carousel/) |
44+
| 36 | [Hoverboard](https://github.com/solygambas/html-css-fifty-projects/tree/master/hoverboard) | [Live Demo](/hoverboard/) |
45+
| 37 | [Pokedex](https://github.com/solygambas/html-css-fifty-projects/tree/master/pokedex) | [Live Demo](/pokedex/) |
46+
| 38 | [Mobile Tab Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/mobile-tab-navigation) | [Live Demo](/mobile-tab-navigation/) |
47+
| 39 | [Password Strength Background](https://github.com/solygambas/html-css-fifty-projects/tree/master/password-strength-background) | [Live Demo](/password-strength-background/) |
48+
| 40 | [3d Background Boxes](https://github.com/solygambas/html-css-fifty-projects/tree/master/3d-boxes-background) | [Live Demo](/3d-background-boxes/) |
49+
| 41 | [Verify Account Ui](https://github.com/solygambas/html-css-fifty-projects/tree/master/verify-account-ui) | [Live Demo](/verify-account-ui/) |
50+
| 42 | [Live User Filter](https://github.com/solygambas/html-css-fifty-projects/tree/master/live-user-filter) | [Live Demo](/live-user-filter/) |
51+
| 43 | [Feedback Ui Design](https://github.com/solygambas/html-css-fifty-projects/tree/master/feedback-ui-design) | [Live Demo](/feedback-ui-design/) |
52+
| 44 | [Custom Range Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/custom-range-slider) | [Live Demo](/custom-range-slider/) |
53+
| 45 | [Netflix Mobile Navigation](https://github.com/solygambas/html-css-fifty-projects/tree/master/netflix-mobile-navigation) | [Live Demo](/netflix-mobile-navigation/) |
54+
| 46 | [Quiz App](https://github.com/solygambas/html-css-fifty-projects/tree/master/quiz-app) | [Live Demo](/quiz-app/) |
55+
| 47 | [Testimonial Box Switcher](https://github.com/solygambas/html-css-fifty-projects/tree/master/testimonial-box-switcher) | [Live Demo](/testimonial-box-switcher/) |
56+
| 48 | [Random Image Feed](https://github.com/solygambas/html-css-fifty-projects/tree/master/random-image-generator) | [Live Demo](/random-image-feed/) |
57+
| 49 | [Todo List](https://github.com/solygambas/html-css-fifty-projects/tree/master/todo-list) | [Live Demo](/todo-list/) |
58+
| 50 | [Insect Catch Game](https://github.com/solygambas/html-css-fifty-projects/tree/master/insect-catch-game) | [Live Demo](/insect-catch-game/) |
2659

2760
Based on [50 Projects In 50 Days - HTML, CSS & JavaScript](https://www.udemy.com/course/50-projects-50-days/) by Brad Traversy (2020).

0 commit comments

Comments
 (0)