Buttons can be used in dialogs, forms and dashboard links and cards.


Kodhus provides different stylings for buttons. Let's start with the default version:


To create a button, attach .cdt-btn as the class of your button as follow:

The output of this will be following:

<button class="cdt-btn">Button</button>


You can attach following classes to get different colors based on your usecase. Whether it is a success button, a primary one, a button that leads to an important action, we have it all.

<button class="cdt-btn cdt-btn-primary">Primary button</button>
<button class="cdt-btn cdt-btn-primary-1">Primary-1 button</button>
<button class="cdt-btn cdt-btn-secondary">Secondary button</button>
<button class="cdt-btn cdt-btn-error">Error button</button>
<button class="cdt-btn cdt-btn-gray">Gray button</button>


Kodhus library provide 2 versions of rounded buttons. A fully rounded one and a normal rounded (3px border-radius).

<button class="cdt-btn cdt-btn-full-rounded">Fully rounded button</button>  
<button class="cdt-btn cdt-btn-rounded">Rounded button</button>

The output of this will be following:

Different sizes

You can apply 2 class to get different sizes than normal. .cdt-btn-small and .cdt-btn-large like followings:

<button class="cdt-btn cdt-btn-small">Small button</button>  
<button class="cdt-btn cdt-btn-large">Large button</button>  

Cool buttons

Center outwards

Comes & goes

With arrows

Some Examples

Here are some of the example that you can make using Kodhus library:

<button class="cdt-btn cdt-btn-primary cdt-btn-rounded">Primary rounded</button>
<button class="cdt-btn cdt-btn-primary-1 cdt-btn-small">Primary-1 small</button>
<button class="cdt-btn cdt-btn-secondary cdt-btn-full-rounded">Secondary fully rounded</button>
<button class="cdt-btn cdt-btn-error">Error button</button>
<button class="cdt-btn cdt-btn-gray cdt-btn-large cdt-btn-rounded">Gray gray large rounded</button>