BUTTONSV 按钮食用说明书

形状与尺寸

按钮的颜色分为

  • 白底 tiny
  • 蓝底 primary
  • 绿底 action
  • 橙底 highlight
  • 红底 caution
  • 紫底 royal

常用样式

1
<a style="color:#666" href="#" class="button button-tiny">Go</a>

Go

1
<a style="color:#666" href="#" class="button button-rounded button-tiny">Go</a>

Go

1
<a style="color:#666" href="#" class="button button-pill button-tiny">Go</a>

Go

1
<a style="color: #FFF;" href="#" class="button button-primary button-small">Go</a>

Go

1
<a style="color: #FFF;" href="#" class="button button-primary button-rounded button-small">Go</a>

Go

1
<a style="color: #FFF;" href="#" class="button button-primary button-pill button-small">Go</a>

Go

1
<a style="color: #FFF;" href="#" class="button button-highlight button-large">Go</a>

Go

1
<a style="color: #FFF;" href="#" class="button button-highlight button-rounded button-large">Go</a>

Go

1
<a style="color: #FFF;" href="#" class="button button-highlight button-pill button-large">Go</a>

Go

1
<a style="color: #FFF;" href="#" class="button button-caution button-jumbo">Go</a>

Go

1
<a style="color: #FFF;" href="#" class="button button-caution button-rounded button-jumbo">Go</a>

Go

1
<a style="color: #FFF;" href="#" class="button button-caution button-pill button-jumbo">Go</a>

Go

1
<a style="color: #FFF;" href="#" class="button button-royal button-giant">Go</a>

Go

1
<a style="color: #FFF;" href="#" class="button button-royal button-rounded button-giant">Go</a>

Go

1
<a style="color: #FFF;" href="#" class="button button-royal button-pill button-giant">Go</a>

Go

不常用

1
2
3
<button class="button button-square button-tiny">
  <i class="fa fa-plus"></i>
</button>
1
2
3
<button class="button button-box button-tiny">
  <i class="fa fa-plus"></i>
</button>
1
2
3
<button class="button button-circle button-tiny">
  <i class="fa fa-plus"></i>
</button>
1
2
3
<button class="button button-primary button-square button-small">
  <i class="fa fa-plus"></i>
</button>
1
2
3
<button class="button button-primary button-box button-small">
  <i class="fa fa-plus"></i>
</button>
1
2
3
<button class="button button-primary button-circle button-small">
  <i class="fa fa-plus"></i>
</button>
1
2
3
<button class="button button-action button-square">
  <i class="fa fa-plus"></i>
</button>
1
2
3
<button class="button button-action button-box">
  <i class="fa fa-plus"></i>
</button>
1
2
3
<button class="button button-action button-circle">
  <i class="fa fa-plus"></i>
</button>
1
2
3
<button class="button button-highlight button-square button-large">
  <i class="fa fa-plus"></i>
</button>
1
2
3
<button class="button button-highlight button-box button-large">
  <i class="fa fa-plus"></i>
</button>
1
2
3
<button class="button button-highlight button-circle button-large">
  <i class="fa fa-plus"></i>
</button>
1
2
3
<button class="button button-caution button-square button-jumbo">
  <i class="fa fa-plus"></i>
</button>
1
2
3
<button class="button button-caution button-box button-jumbo">
  <i class="fa fa-plus"></i>
</button>
1
2
3
<button class="button button-caution button-circle button-jumbo">
  <i class="fa fa-plus"></i>
</button>
1
2
3
<button class="button button-royal button-square button-giant">
  <i class="fa fa-plus"></i>
</button>
1
2
3
<button class="button button-royal button-box button-giant">
  <i class="fa fa-plus"></i>
</button>
1
2
3
<button class="button button-royal button-circle button-giant">
  <i class="fa fa-plus"></i>
</button>

带边框和不带边框的按钮

1
2
3
<button class="button button-large button-plain button-border button-circle">
  <i class="fa fa-reply"></i>
</button>
1
2
3
<button class="button button-large button-plain button-border button-box">
  <i class="fa fa-star"></i>
</button>
1
2
3
<button class="button button-large button-plain button-border button-square">
  <i class="fa fa-trash-o"></i>
</button>
1
2
3
<button style="color:red" class="button button-large button-plain button-borderless" style="color:red">
  <i class="fa fa-tag">test</i>
</button>

3D 按钮

1
2
3
<button class="button button-3d button-box button-jumbo">
  <i class="fa fa-thumbs-up"></i>
</button>
1
<a style="color: #FFF;" href="#" class="button button-3d button-primary button-rounded">Check out the new site!</a>
Check out the new site!
1
<a style="color: #FFF;" href="#" class="button button-3d button-action button-pill">Visit Us!</a>
Visit Us!
1
2
3
<button class="button button-3d button-action button-circle button-jumbo">
  <i class="fa fa-thumbs-up"></i>
</button>
1
2
<a style="color: #FFF;" href="#" class="button button-3d button-caution">
  <i class="fa fa-camera"></i> Go</a>
Go
1
<a style="color: #FFF;" href="#" class="button button-3d button-royal">Say Hi!</a>
Say Hi!
1
<a style="color: #FFF;" href="#" class="button button-raised button-primary button-pill">Visit Us!</a>
Visit Us!
1
2
3
<button class="button button-raised button-action button-circle button-jumbo">
  <i class="fa fa-thumbs-up"></i>
</button>
1
2
<a style="color: #FFF;" href="#" class="button button-raised button-caution">
  <i class="fa fa-camera"></i> Go</a>
Go
1
<a style="color: #FFF;" href="#" class="button button-raised button-royal">Say Hi!</a>
Say Hi!
1
<a style="color: #FFF;" href="#" class="button button-raised button-pill button-inverse">Say Hi!</a>
Say Hi!

光晕效果

1
<a style="color: #FFF;" href="#" class="button button-glow button-rounded button-raised button-primary">Go</a>

Go

1
<a style="color: #1B9AF7;" href="#" class="button button-glow button-border button-rounded button-primary">Go</a>

Go

1
2
3
<button class="button button-glow button-circle button-action button-jumbo">
  <i class="fa fa-thumbs-up"></i>
</button>
1
<a style="color: #FFF;" href="#" class="button button-glow button-rounded button-highlight">Go</a>
Go
1
<a style="color: #FFF;" href="#" class="button button-glow button-rounded button-caution">Go</a>
Go
1
<a style="color: #FFF;" href="#" class="button button-glow button-rounded button-royal">Go</a>
Go

各种文字样式

1
<a style="color: #FFF;" href="#" class="button button-uppercase button-primary">uppercase</a>

uppercase

1
<a style="color: #FFF;" href="#" class="button button-lowercase button-primary ">lowercase</a>

lowercase

1
<a style="color: #FFF;" href="#" class="button button-capitalize button-primary">capitalize</a>

capitalize

1
<a style="color: #FFF;" href="#" class="button button-small-caps button-primary">small caps</a>

small caps