1.1 #Components - Buttons Buttons

Toggle example guides Toggle HTML markup

Buttons are one of the most used components. It's the very basic way that users can interact with an application. Currently HolaKit provides 3 kinds of button: Normal buttons, primary buttons and Ghost buttons.

  • Normal Buttons: For general purpose.
  • Primary Buttons: For primary operations. Normally in a row of buttons, you have at least one primary buttons, for the most frequent usage.
  • Ghost Buttons: For banner and heroes. It's kind of call-to-action.

All buttons classes can be apply to form submits (<input type="submit">), HTML buttons (<button>) and links (<a>). In many cases you can also use just a bare a.hola-button, for links in a row with other buttons to be properly aligned.

Example

链接按钮

Primary Button Ghost Button

Markup: components/button.html 
<p>
  <input type="submit" class="hola-button hola-button-normal" value="表单提交">
  <button class="hola-button hola-button-normal">&lt;button&gt; 组件</button>
  <a href="#" class="hola-button hola-button-normal">链接按钮</a>
</p>
<p>
  <a href="#" class="hola-button hola-button-primary">Primary Button</a>
  <a href="#" class="hola-button hola-button-ghost">Ghost Button</a>
</p>
Source: components/button.css, line 1