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>