Like button shooting confetti using React and confetti-canvas
A Pen by Marco Biedermann on CodePen.
<div id="root"></div> |
import React, { useCallback } from "https://cdn.skypack.dev/react@17"; | |
import { render } from "https://cdn.skypack.dev/react-dom@17"; | |
import confetti from "https://cdn.skypack.dev/canvas-confetti@1"; | |
function App() { | |
const onClick = useCallback(() => { | |
confetti({ | |
particleCount: 150, | |
spread: 60 | |
}); | |
}, []); | |
return ( | |
<button className="button" onClick={onClick}> | |
<span>🎉</span> | |
<span>Like</span> | |
</button> | |
); | |
} | |
render(<App />, document.getElementById("root")); |
* { | |
box-sizing: border-box; | |
} | |
body { | |
background-color: #f5f8ff; | |
font-family: 'Roboto', sans-serif; | |
line-height: 1.5; | |
min-block-size: 100vh; | |
display: grid; | |
place-items: center; | |
} | |
button { | |
cursor: pointer; | |
font: inherit; | |
margin: 0; | |
padding: 0; | |
} | |
.button { | |
background-color: #404663; | |
color: #fff; | |
border: 0; | |
font-size: 2rem; | |
font-weight: 400; | |
padding: 0.5em 1.25em; | |
border-radius: 0.5em; | |
z-index: 999; | |
position: relative; | |
display: flex; | |
gap: 0.5em; | |
box-shadow: | |
0px 1.7px 2.2px rgba(0, 0, 0, 0.02), | |
0px 4px 5.3px rgba(0, 0, 0, 0.028), | |
0px 7.5px 10px rgba(0, 0, 0, 0.035), | |
0px 13.4px 17.9px rgba(0, 0, 0, 0.042), | |
0px 25.1px 33.4px rgba(0, 0, 0, 0.05), | |
0px 60px 80px rgba(0, 0, 0, 0.07); | |
} | |
.button:active { | |
transform: scale(1.01); | |
} |