Go one step further with our solutions for creating an intuitive, personalized experience.
Buttons are important when a user wants to take action on your site. With Haltura, you have a wide range of choices.
Use the h_btn class to generate a Button component.
Depending on the situation, it will be necessary to use different kinds of buttons. The colors and shapes are important to prioritize these components.
<button class="h_btn">Button</button>
<button class="h_btn flat">Button</button>
<button class="h_btn outlined">Button</button>
<button class="h_btn ghost">Button</button><br>
<button class="h_btn primary">Button</button>
<button class="h_btn primary flat">Button</button>
<button class="h_btn primary outlined">Button</button>
<button class="h_btn primary ghost">Button</button><br>
<button class="h_btn accent">Button</button>
<button class="h_btn accent flat">Button</button>
<button class="h_btn accent outlined">Button</button>
<button class="h_btn accent ghost">Button</button><br>
<button class="h_btn danger">Button</button>
<button class="h_btn danger flat">Button</button>
<button class="h_btn danger outlined">Button</button>
<button class="h_btn danger ghost">Button</button><br>
<button class="h_btn" disabled>Button</button>
<button class="h_btn flat" disabled>Button</button>
<button class="h_btn outlined" disabled>Button</button>
<button class="h_btn ghost" disabled>Button</button>
Depending on certain situations, it will be possible to change their size with additional classes small, compact, comfortable and large.
<button class="h_btn small">small</button>
<button class="h_btn compact">compact</button>
<button class="h_btn">default</button>
<button class="h_btn comfortable">comfortable</button>
<button class="h_btn large">large button</button>
Wrap the buttons and apply the h_btn-group class to group them.
<div class="h_btn-group">
<button class="h_btn primary flat">Button</button>
<button class="h_btn primary flat">Button</button>
<button class="h_btn primary flat" disabled>Disabled</button>
</div>
<button class="h_btn">Button</button>
<button class="h_btn flat">Button</button>
<button class="h_btn outlined">Button</button>
<button class="h_btn ghost">Button</button><br>
<button class="h_btn primary">Button</button>
<button class="h_btn primary flat">Button</button>
<button class="h_btn primary outlined">Button</button>
<button class="h_btn primary ghost">Button</button><br>
<button class="h_btn accent">Button</button>
<button class="h_btn accent flat">Button</button>
<button class="h_btn accent outlined">Button</button>
<button class="h_btn accent ghost">Button</button><br>
<button class="h_btn danger">Button</button>
<button class="h_btn danger flat">Button</button>
<button class="h_btn danger outlined">Button</button>
<button class="h_btn danger ghost">Button</button><br>
<button class="h_btn" disabled>Button</button>
<button class="h_btn flat" disabled>Button</button>
<button class="h_btn outlined" disabled>Button</button>
<button class="h_btn ghost" disabled>Button</button>
<button class="h_btn small">small</button>
<button class="h_btn compact">compact</button>
<button class="h_btn">default</button>
<button class="h_btn comfortable">comfortable</button>
<button class="h_btn large">large button</button>
<div class="h_btn-group">
<button class="h_btn primary flat">Button</button>
<button class="h_btn primary flat">Button</button>
<button class="h_btn primary flat" disabled>Disabled</button>
</div>
| Class | Definition |
|---|---|
| h_btn | Create a button. |
| primary | Primary button. |
| accent | Accent button. |
| danger | Danger button. |
| flat | Flat button. |
| ghost | Ghost button. |
| outlined | Outlined button. |
| small | Small button. |
| compact | Compact button. |
| comfortable | Comfortable button. |
| large | Large button. |
| disabled | Disabled effect. |
Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!
Cookie settings