Confetti Button

confetti-button.markdown

Confetti Button

Like button shooting confetti using React and confetti-canvas

A Pen by Marco Biedermann on CodePen.

License.

index.html

<div id="root"></div>

script.babel

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"));

style.postcss

* {
  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);
}