Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Active State Differentiation for Metronics Dashboard Bootstrap Buttons


In the Metronics dashboard, the "active" state for buttons isn't distinct, unlike in Bootstrap where buttons show differences between "hover" and "active" states.

I noticed in the Metronics documentation, specifically at https://preview.keenthemes.com/html/metronic/docs/base/buttons#active-style, you mention how the "Active Style" is designed to "set a button's color for active & hover states."

Is there differentiate an "active" state for the Metronics buttons so that they are responsive both on hover and when clicked?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hi,

Thank you for your feedback. Noted. We are currently working on design improvements and definitely will take into account your suggestions.

However Bootstrap uses the same color for hover and active states as you can see in the
docs.

Regards.



Great, I look forward to the updates!

Also just so we're on the same page, by "active" I mean the state the button is when it is clicked and held on the click.

On the bootstrap docs, the bootstrap primary button background is #0d6efd on default, #0b5ed7 on hover and #0a58ca on active.

See attached picture for the css I'm seeing using chrome dev tools.


Maybe I"m reading something wrong here.



Hi,

Thanks for the clarification. Sure, noted on the active state. We will check it further and improve it in the next update.


Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(