دکمه ها

      <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>
      

      <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>
      

      <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>
      

      <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>
      

      <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>
      

      <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>
      

      <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>
      

      <button class="button h-button is-primary is-elevated">
          <span class="icon">
              <i class="fab fa-twitter"></i>
          </span>
          <span>توئیت کنید</span>
      </button>
      <button class="button h-button is-success is-rounded is-elevated">
          <span class="icon">
              <i class="fas fa-check"></i>
          </span>
          <span>ذخیره تغییرات</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>
      

      <button class="button h-button is-primary is-elevated">
          <span class="icon">
              <i data-feather="twitter"></i>
          </span>
          <span>توئیت کنید</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>
      

      <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>تایید</span>
          </button>
      </div>
      

      <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>
      

      <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>