The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro
Light
Dark
System
Ask  Question

Animated Button on HTML version


Hello!
On Metronic 9.x HTML there is a animated button like on React or Next.js versions? I do not found on docs


user
Elieser Morais 3 months ago
HTML
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

 
Deleted comment
 
Deleted comment
 
Deleted comment
user
Faizal Author 3 months ago

Hi Elieser Morais

At the moment, Metronic 9.x HTML does not ship a dedicated animated button component like the one in the React/Next.js kits.

Metronic 9 is split into two UI libraries:

KtUI — powers the HTML version (vanilla JS + Tailwind)
ReUI — powers the React/Next.js versions
The main animated button you may have seen in React/Next.js demos is the GitHub Button (GithubButton). It animates the star counter and star fill using Motion. That component is part of ReUI and is documented here:

ReUI — https://v1.reui.io/docs/github-button

For the HTML version, the documented button component is the standard KTUI Button using kt-btn classes (primary, secondary, outline, ghost, sizes, icons, disabled states, and so on). These support normal hover/focus transitions, but not the GitHub-style animated counter.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.

ReUI by Keenthemes React Components UI Blocks React Templates ReUI Documentation