Shiny Button

atlas-ui/shiny-button-html

FreeUtility

A shiny button with a sleek animation effect using HTML, CSS, JavaScript and Motion.

Live preview

live · rendered by the registry

Rendered by atlas-ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://atlasui.dev/r/shiny-button-html.json

Source

registry/html/atlasui/shiny-button/index.htmlatlasui.dev/r/shiny-button-html.json

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Shiny Button - Atlas UI</title>
7    <link rel="stylesheet" href="style.css" />
8  </head>
9  <body>
10    <button class="shiny-button">
11      <span class="button-content">Button</span>
12    </button>
13  </body>
14 
15  <script type="module" src="script.js"></script>
16</html>

What it pulls in

npm packages

motion

Files it writes

registry/html/atlasui/shiny-button/index.html
registry/html/atlasui/shiny-button/style.css
registry/html/atlasui/shiny-button/script.js

More from atlas-ui

All 99 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Animated Mobile Navbaranimated-mobile-navbar-html	atlas-ui	Utilities	Free	1 dep · 3 files
Blend Mouse Trailerblend-mouse-trailer-html	atlas-ui	Utilities	Free	no deps · 3 files
Blob Mouse Trailerblob-mouse-trailer-html	atlas-ui	Utilities	Free	no deps · 3 files
Box Revealbox-reveal-html	atlas-ui	Utilities	Free	1 dep · 3 files
Cascade Textcascade-text-html	atlas-ui	Utilities	Free	1 dep · 3 files
Dot And Circle Mouse Trailerdot-and-circle-mouse-trailer-html	atlas-ui	Utilities	Free	no deps · 3 files
Fancy Theme Togglefancy-theme-toggle-html	atlas-ui	Utilities	Free	2 deps · 3 files
Hacker Texthacker-text-html	atlas-ui	Utilities	Free	no deps · 3 files