Confetti Button using CSS & React

Written by Aomi Bora in Blog

A cool Confetti Button animation made using CSS & React. Made by Marco Biedermann.

The codes are separated in three parts, so copy all three parts combine them and after that run the code. You can use three separate files for HTML, CSS & Js or you can just use one index.html file.

Html Code

Here is the Html Code.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Confetti Button</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500;700&display=swap" rel="stylesheet">
</head>
<body>
  <div id="root"></div>
</body>
</html>

CSS Code

Here is the CSS Code.

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

JavaScript Code

Here is the JavaScript Code. Script – script type=”module”.

import React, { useCallback } from "https://cdn.skypack.dev/[email protected]";
import { render } from "https://cdn.skypack.dev/[email protected]";
import confetti from "https://cdn.skypack.dev/[email protected]";

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

  }, []);

  return /*#__PURE__*/(
    React.createElement("button", { className: "button", onClick: onClick }, /*#__PURE__*/
    React.createElement("span", null, "🎉"), /*#__PURE__*/
    React.createElement("span", null, "Like")));


}

render( /*#__PURE__*/React.createElement(App, null), document.getElementById("root"));

Complete Code

Here is the complete code for one single index.html file.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Confetti Button</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];500;700&display=swap" rel="stylesheet">
<style>
* {
  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);
}
</style>
</head>
<body>
  <div id="root"></div>
      <script type="module">
import React, { useCallback } from "https://cdn.skypack.dev/[email protected]";
import { render } from "https://cdn.skypack.dev/[email protected]";
import confetti from "https://cdn.skypack.dev/[email protected]";

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

  }, []);

  return /*#__PURE__*/(
    React.createElement("button", { className: "button", onClick: onClick }, /*#__PURE__*/
    React.createElement("span", null, "🎉"), /*#__PURE__*/
    React.createElement("span", null, "Like")));


}

render( /*#__PURE__*/React.createElement(App, null), document.getElementById("root"));
    </script>
</body>
</html>

Recent Content