Skip to main content

Buttons

So you want to make a button? Well, you can use the HypeStyle button component. Down below you can see a button thats styled with the HypeStyle button component.

Example:

<button class="btn btn-primary text-white">Primary Button</button>

All Buttons:

<button class="btn-primary text-white">Primary Button</button>
<button class="btn-secondary text-white">Secondary Button</button>
<button class="btn-error text-white">error Button</button>
<button class="btn-info text-white">Info Button</button>
<button class="btn-blue text-white">Blue Button</button>|
<button class="btn-red text-white">Red Button</button>
<button class="btn-green text-white">Green Button</button>
<button class="btn-yellow text-white">Yellow Button</button>
<button class="btn-purple text-white">Purple Button</button>
<button class="btn-orange text-white">Orange Button</button>
<button class="btn-gray text-white">Gray Button</button>

Button dark and light​

With HypeStyle you can make your buttons dark and light. Example:

<button class="btn bg-primary-dark-3 text-white">
    Primary Button More Dark
</button>

<button class="btn bg-primary-light-3 text-white">
    Primary Button Light Dark
</button>

Its actually pretty easy to do this. bg-COLOR-dark-NUMBER or bg-COLOR-light-NUMBER You can find the colors and the dark and light numbers in the HypeStyle documentation.

You can also add text and bg hover to the buttons. Same way just use text-hover-COLOR

<button
    class="btn btn-primary bg-hover-black text-hover-white text-white tr-sm"
>
    Primary Button With Hover
</button>

You add a border-radius to the button. Read more about Border Radius in the HypeStyle documentation. Click here + You can add some transition to the button. Read more about Transtion in the HypeStyle documentation. Click here

Example: br-sm tr-sm