Select Language

Activity

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

H-Button

Huro provides it's own subset of Bulma buttons. Use the h-button class with a Bulma native button class to start using Huro buttons. Basic modifiers such as is-bold and is-rounded are available.

Button Button

            <a class="button h-button">Button</a>
            <button class="button h-button is-bold">Button</button>
            <a class="button h-button is-rounded">Button</a>
            <button class="button h-button is-rounded is-bold">Button</button>
            

Solid Colors

Huro buttons can have solid colors. You can use the same classes that are offered by the Bulma Framework. Available color classes are is-primary, is-info, is-success, is-warning, is-danger, is-light, is-white.


            <a class="button h-button is-primary">Primary</a>
            <a class="button h-button is-info">Info</a>
            <a class="button h-button is-success">Success</a>
            <a class="button h-button is-warning">Warning</a>
            <a class="button h-button is-danger">Danger</a>
            <a class="button h-button is-light">Light</a>
            <a class="button h-button is-white">White</a>
            

Light Colors

Solid buttons are available in lighter versions. Simply use the same markup that we have for solid buttons and add the is-light modifier class.


            <a class="button h-button is-primary is-light">Primary</a>
            <a class="button h-button is-info is-light">Info</a>
            <a class="button h-button is-success is-light">Success</a>
            <a class="button h-button is-warning is-light">Warning</a>
            <a class="button h-button is-danger is-light">Danger</a>
            

Outlined Colors

Huro Buttons can be outlined. Simply use the same markup that we have for solid buttons and add the is-outlined modifier class.


            <a class="button h-button is-primary is-outlined">Primary</a>
            <a class="button h-button is-info is-outlined">Info</a>
            <a class="button h-button is-success is-outlined">Success</a>
            <a class="button h-button is-warning is-outlined">Warning</a>
            <a class="button h-button is-danger is-outlined">Danger</a>
            

Elevation

Huro buttons can handle elevation. For a hover triggered elevation, add the is-raised modifier class. For a permanent elevation, add the is-elevated modifier class.


            <a class="button h-button is-primary is-raised">Primary</a>
            <a class="button h-button is-info is-raised">Info</a>
            <a class="button h-button is-success is-raised">Success</a>
            <a class="button h-button is-warning is-elevated">Warning</a>
            <a class="button h-button is-danger is-elevated">Danger</a>
            

Loading

Huro buttons can be shown in a loading state. To show a loading spinner, add the is-loading modifier class.


            <a class="button h-button is-loading">Button</a>
            <a class="button h-button is-primary is-loading">Button</a>
            <a class="button h-button is-info is-loading">Button</a>
            <a class="button h-button is-success is-loading is-rounded">Button</a>
            <a class="button h-button is-warning is-loading is-rounded">Button</a>
            <a class="button h-button is-danger is-loading is-rounded">Button</a>
            

Disabled

Huro buttons can be shown in a disabled state. To show a disabled button, add the disabled html attribute to the target button element.


            <a class="button h-button is-primary is-disabled">Primary</a>
            <a class="button h-button is-info is-disabled">Info</a>
            <a class="button h-button is-success is-disabled">Success</a>
            <a class="button h-button is-warning is-disabled">Warning</a>
            <a class="button h-button is-danger is-disabled">Danger</a>
            

Font Awesome

Huro buttons work well with Font Awesome Icons. Add an icon element inside the button to handle icons. You can also create square and circle buttons with a single icon. Please refer to markup for detailed examples.


            <button class="button h-button is-primary is-elevated">
                <span class="icon">
                    <i class="fab fa-twitter"></i>
                </span>
                <span>Tweet Now</span>
            </button>
            <button class="button h-button is-success is-rounded is-elevated">
                <span class="icon">
                    <i class="fas fa-check"></i>
                </span>
                <span>Save Changes</span>
            </button>
            <button class="button">
                <span class="icon is-small">
                    <i class="fab fa-twitter"></i>
                </span>
            </button>
            <button class="button is-primary is-circle is-elevated">
                <span class="icon is-small">
                    <i class="fab fa-linkedin-in"></i>
                </span>
            </button>
            

Feather Icons

Huro buttons work well with Feather Icons. Add an icon element inside the button to handle icons. You can also create square and circle buttons with a single icon. Please refer to markup for detailed examples.


            <button class="button h-button is-primary is-elevated">
                <span class="icon">
                    <i data-feather="twitter"></i>
                </span>
                <span>Tweet Now</span>
            </button>
            <button class="button h-button is-danger is-rounded is-elevated">
                <span class="icon">
                    <i data-feather="gitlab"></i>
                </span>
                <span>Commit Code</span>
            </button>
            <button class="button">
                <span class="icon is-small">
                    <i data-feather="mail"></i>
                </span>
            </button>
            <button class="button is-primary is-circle is-elevated">
                <span class="icon is-small">
                    <i data-feather="message-square"></i>
                </span>
            </button>
            

Button Group

You can easily align buttons and group them together by wrapping them inside a buttons element. You can mix any button styles.


            <div class="buttons">
                <button class="button h-button">
                    <span class="icon">
                        <i data-feather="eye"></i>
                    </span>
                    <span>View</span>
                </button>
                <button class="button h-button">
                    <span class="icon">
                        <i data-feather="edit-2"></i>
                    </span>
                    <span>Edit</span>
                </button>
                <button class="button h-button is-success is-elevated">
                    <span class="icon">
                        <i class="fas fa-check"></i>
                    </span>
                    <span>Approve</span>
                </button>
            </div>
            

Addons

Huro buttons can be grouped together in an addon styled block of buttons. This makes creating conmplex interfaces much more easier. Refer to markup for a detailed example.


            <div class="field has-addons">
                <p class="control">
                    <button class="button h-button">
                        <span class="icon is-small">
                            <i class="fas fa-align-left"></i>
                        </span>
                        <span>Left</span>
                    </button>
                </p>
                <p class="control">
                    <button class="button h-button">
                        <span class="icon is-small">
                            <i class="fas fa-align-center"></i>
                        </span>
                        <span>Center</span>
                    </button>
                </p>
                <p class="control">
                    <button class="button h-button">
                        <span class="icon is-small">
                            <i class="fas fa-align-right"></i>
                        </span>
                        <span>Right</span>
                    </button>
                </p>
            </div>
            

H-Action

Huro also provides a simple button called h-action. it doesn't come up with a lot of modifiers like the H Button but is a solid alternative when you want to use simple buttons.

Button Button

            <a class="button h-action">Button</a>
            <button class="button h-action is-rounded">Button</button>
            <a class="button h-action is-hoverable">Button</a>
            <button class="button h-action is-grey">Button</button>