To create a nice button, just choose a class:
You have two options to disable a button:
- Use the attribute
disabledand really disable it;
- Use the class
disabledand only make it look disabled.
When you use only the class, actions continue to be triggered when you click the button.
In the example bellow, all buttons would trigger an alert, but the first three are disabled with the attribute, so it won't work. Try clicking on them:
Note that links don't support the
disabled attribute, so they will behave as if using the class instead of the attribute.
To get a behavior close to the disabled button, you can use the class
disable-pointer so the element wont respond to mouse events (click and hover), and use the a negative
tabindex to prevent the focus on keyboard navigation.
To set a different size, just add the class
btn-lg to your button.
LiteAdmin also provides discrete buttons, that are highlighted when the user needs them.
Using it is easy: add the class
color-trigger to any element and the buttons inside it will be discrete, being highlighted when the user hovers the given element.
In the example below, the class was added in the table's rows:
In devices that are not good to hover (like touchscreens) or in browsers that we can't detect it, the buttons are colored by default, for accessibility.
If you need pagination, we've got you covered. Just create a
<div class="pagination"> with links inside, and you're good to go.