├── index.html
├── original-like-button.svg
├── script.js
└── styles.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Document
10 |
11 |
12 |
37 |
38 |
--------------------------------------------------------------------------------
/original-like-button.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const likeButton = document.querySelector('.like-button')
2 | const groupCuff = document.querySelector('.group-cuff')
3 | const groupTop = document.querySelector('.group-top')
4 | const groupLeft = document.querySelector('.group-left')
5 | const groupTopRight = document.querySelector('.group-top-right')
6 | const groupBottomRight = document.querySelector('.group-bottom-right')
7 | let numberOfClicks = 0
8 |
9 | likeButton.addEventListener('click', () => {
10 | numberOfClicks++
11 | if (numberOfClicks >= 12) {
12 | groupLeft.classList.add('cracked')
13 | likeButton.classList.add('exploded')
14 | } else if (numberOfClicks >= 9) {
15 | groupBottomRight.classList.add('cracked')
16 | } else if (numberOfClicks >= 6) {
17 | groupTopRight.classList.add('cracked')
18 | } else if (numberOfClicks >= 3) {
19 | groupTop.classList.add('cracked')
20 | }
21 |
22 | likeButton.classList.add('big')
23 | })
24 |
25 | likeButton.addEventListener('transitionend', () => {
26 | likeButton.classList.remove('big')
27 | })
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | min-height: 100vh;
6 | margin: 0;
7 | }
8 |
9 | .like-button {
10 | cursor: pointer;
11 | transition: transform 50ms ease-in-out;
12 | overflow: visible;
13 | }
14 |
15 | .like-button.exploded {
16 | cursor: initial;
17 | }
18 |
19 | .like-button.big:not(.exploded) {
20 | transform: scale(1.2);
21 | }
22 |
23 | .crack {
24 | display: none;
25 | }
26 |
27 | .group-top.cracked .crack,
28 | .group-top-right.cracked .crack,
29 | .group-bottom-right.cracked .crack,
30 | .group-left.cracked .crack,
31 | .group-cuff.cracked .crack {
32 | display: block;
33 | }
34 |
35 | .group-top,
36 | .group-top-right,
37 | .group-bottom-right,
38 | .group-left,
39 | .group-cuff {
40 | transition: transform 1s;
41 | transform-origin: center;
42 | }
43 |
44 | .exploded .group-top {
45 | transform: translate(-15vw, -40vh) rotate(500deg);
46 | }
47 |
48 | .exploded .group-top-right {
49 | transform: translate(40vw, -30vh) rotate(100deg);
50 | }
51 |
52 | .exploded .group-bottom-right {
53 | transform: translate(40vw, 30vh) rotate(200deg);
54 | }
55 |
56 | .exploded .group-left {
57 | transform: translate(-40vw, -15vh) rotate(400deg);
58 | }
59 |
60 | .exploded .group-cuff {
61 | transform: translate(-40vw, 15vh) rotate(300deg);
62 | }
--------------------------------------------------------------------------------