Blooming Button

Add a blooming emoji effect when a button is clicked. Import this val as a module and add the bloom-button class to your button. Demo here: https://www.val.town/v/maxm/bloomingButtonDemo

Create val
/** @jsxImportSource https://esm.sh/react */
import { renderToString } from "npm:react-dom/server";

export default async function(req: Request): Promise<Response> {
  return new Response(
    renderToString(
      <>
        <link rel="stylesheet" href="https://jenil.github.io/bulmaswatch/simplex/bulmaswatch.min.css" />
        <div style={{ textAlign: "center", marginTop: "100px" }}>
          <button className="is-success button bloom-button" id="treeButton">Click Me</button>
        </div>
        <script type="module" src="https://esm.town/v/maxm/bloomingButton" />
      </>,
    ),
    { headers: { "content-type": "text/html" } },
  );
}