<div id="root"></div>
* {
  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);
}
View Compiled
import React, { useCallback } from "https://cdn.skypack.dev/react";
import { render } from "https://cdn.skypack.dev/react-dom";
import confetti from "https://cdn.skypack.dev/canvas-confetti";

function App() {
  const onClick = useCallback(() => {
    confetti({
      particleCount: 150,
      spread: 60
    });
  }, []);

  return (
    <>
      <button className="button" onClick={onClick}>
        <span>🎉</span>
        <span>Hurray</span>
      </button>
    </>
  );
}

render(<App />, document.getElementById("root"));
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.