Buttons.
Buttons let people take clear actions. Use a primary button for the most important action in a section.
Class names
Start with btn, then add modifiers when needed.
| Class name | Description |
|---|---|
btn |
The base button class. |
btn-one |
A small radius button |
btn-outline |
A button with an outline |
btn-large |
A large button |
btn-wide |
A button with large width |
Button
The default NodexUI buttons
Code
<button class="btn bg-white-300 text-black"><a class="text-black" href="#">Button</a></button>
<button class="btn bg-red-300 text-black"><a class="text-black" href="#">Button</a></button>
<button class="btn bg-blue-300 text-black"><a class="text-black" href="#">Button</a></button>
<button class="btn bg-green-300 text-black"><a class="text-black" href="#">Button</a></button>
<button class="btn bg-yellow-300 text-black"><a class="text-black" href="#">Button</a></button>
<button class="btn bg-black-300 text-white"><a class="text-white" href="#">Button</a></button>
Button styles
Normal radius button.
Code
<button class="btn-one bg-white-300 text-black"><a class="text-black" href="#">Button</a></button>
<button class="btn-one bg-red-300 text-black"><a class="text-black" href="#">Button</a></button>
<button class="btn-one bg-blue-300 text-black"><a class="text-black" href="#">Button</a></button>
<button class="btn-one bg-green-300 text-black"><a class="text-black" href="#">Button</a></button>
<button class="btn-one bg-yellow-300 text-black"><a class="text-black" href="#">Button</a></button>
<button class="btn-one bg-black-300 text-white"><a class="text-white" href="#">Button</a></button>
Button sizes
Choose a size that fits the density and priority of your interface.
Code
<button class="btn-outline"><a href="#">Button outline</a></button>
<button class="btn-large"><a href="#">Button large</a></button>
<button class="btn-wide"><a href="#">Button wide</a></button>
Customizable button
You can change the color of the button and the text of the button.
Code
<button style="background-color: rgb(255, 0, 0);" class="btn"><a style="color: rgb(255, 255, 255);"
href="#">Button</a></button>