小康博客按钮食用说明书

前言

小康博客使用使用的主题（butterfly）并没有按钮样式，而且没有引用 bootstrap 框架（尝试引用了，但会出现冲突），所以引用了 bootstrap 下的另一个 css 按钮样式BUTTONSV，但是a标签还是会与主题自带的样式发生冲突，因此最简单的解决方案是在引入时自己写上文字颜色。

因此本人才会写这篇文章，目的是为了方便自己一键复制。毕竟我是那么的懒。

形状与尺寸

按钮的颜色分为

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

常用样式

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

Go

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

Go

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

Go

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

Go

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

Go

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

Go

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

Go

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

Go

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

Go

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

Go

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

Go

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

Go

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

Go

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

Go

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

Go

不常用

<button class="button button-square button-tiny">
  <i class="fa fa-plus"></i>
</button>

<button class="button button-box button-tiny">
  <i class="fa fa-plus"></i>
</button>

<button class="button button-circle button-tiny">
  <i class="fa fa-plus"></i>
</button>

<button class="button button-primary button-square button-small">
  <i class="fa fa-plus"></i>
</button>

<button class="button button-primary button-box button-small">
  <i class="fa fa-plus"></i>
</button>

<button class="button button-primary button-circle button-small">
  <i class="fa fa-plus"></i>
</button>

<button class="button button-action button-square">
  <i class="fa fa-plus"></i>
</button>

<button class="button button-action button-box">
  <i class="fa fa-plus"></i>
</button>

<button class="button button-action button-circle">
  <i class="fa fa-plus"></i>
</button>

<button class="button button-highlight button-square button-large">
  <i class="fa fa-plus"></i>
</button>

<button class="button button-highlight button-box button-large">
  <i class="fa fa-plus"></i>
</button>

<button class="button button-highlight button-circle button-large">
  <i class="fa fa-plus"></i>
</button>

<button class="button button-caution button-square button-jumbo">
  <i class="fa fa-plus"></i>
</button>

<button class="button button-caution button-box button-jumbo">
  <i class="fa fa-plus"></i>
</button>

<button class="button button-caution button-circle button-jumbo">
  <i class="fa fa-plus"></i>
</button>

<button class="button button-royal button-square button-giant">
  <i class="fa fa-plus"></i>
</button>

<button class="button button-royal button-box button-giant">
  <i class="fa fa-plus"></i>
</button>

<button class="button button-royal button-circle button-giant">
  <i class="fa fa-plus"></i>
</button>

带边框和不带边框的按钮

<button class="button button-large button-plain button-border button-circle">
  <i class="fa fa-reply"></i>
</button>

<button class="button button-large button-plain button-border button-box">
  <i class="fa fa-star"></i>
</button>

<button class="button button-large button-plain button-border button-square">
  <i class="fa fa-trash-o"></i>
</button>

<button
  style="color:red"
  class="button button-large button-plain button-borderless"
  style="color:red"
>
  <i class="fa fa-tag">test</i>
</button>

3D 按钮

<button class="button button-3d button-box button-jumbo">
  <i class="fa fa-thumbs-up"></i>
</button>

<a
  style="color: #FFF;"
  href="#"
  class="button button-3d button-primary button-rounded"
  >Check out the new site!</a
>

Check out the new site!

<a
  style="color: #FFF;"
  href="#"
  class="button button-3d button-action button-pill"
  >Visit Us!</a
>

Visit Us!

<button class="button button-3d button-action button-circle button-jumbo">
  <i class="fa fa-thumbs-up"></i>
</button>

<a style="color: #FFF;" href="#" class="button button-3d button-caution"
  ><i class="fa fa-camera"></i> Go</a
>

Go

<a style="color: #FFF;" href="#" class="button button-3d button-royal"
  >Say Hi!</a
>

Say Hi!

突起样式的按钮

<a
  style="color: #FFF;"
  href="#"
  class="button button-raised button-primary button-pill"
  >Visit Us!</a
>

Visit Us!

<button class="button button-raised button-action button-circle button-jumbo">
  <i class="fa fa-thumbs-up"></i>
</button>

<a style="color: #FFF;" href="#" class="button button-raised button-caution"
  ><i class="fa fa-camera"></i> Go</a
>

Go

<a style="color: #FFF;" href="#" class="button button-raised button-royal"
  >Say Hi!</a
>

Say Hi!

<a
  style="color: #FFF;"
  href="#"
  class="button button-raised button-pill button-inverse"
  >Say Hi!</a
>

Say Hi!

光晕效果

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

Go

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

Go

<button class="button button-glow button-circle button-action button-jumbo">
  <i class="fa fa-thumbs-up"></i>
</button>

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

Go

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

Go

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

Go

各种文字样式

button-uppercase

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

uppercase

button-lowercase

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

lowercase

button-capitalize

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

capitalize

button-small-caps

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

small caps