小康博客按钮食用说明书
前言
小康博客使用使用的主题（butterfly）并没有按钮样式，而且没有引用 bootstrap 框架（尝试引用了，但会出现冲突），所以引用了 bootstrap 下的另一个 css 按钮样式BUTTONSV，但是a标签还是会与主题自带的样式发生冲突，因此最简单的解决方案是在引入时自己写上文字颜色。
因此本人才会写这篇文章，目的是为了方便自己一键复制。毕竟我是那么的懒。
形状与尺寸
按钮的颜色分为
- 白底
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
2
3
| <a style="color: #FFF;" href="#" class="button button-primary button-small"
>Go</a
>
|
Go
1
2
3
4
5
6
| <a
style="color: #FFF;"
href="#"
class="button button-primary button-rounded button-small"
>Go</a
>
|
Go
1
2
3
4
5
6
| <a
style="color: #FFF;"
href="#"
class="button button-primary button-pill button-small"
>Go</a
>
|
Go
1
2
3
| <a style="color: #FFF;" href="#" class="button button-highlight button-large"
>Go</a
>
|
Go
1
2
3
4
5
6
| <a
style="color: #FFF;"
href="#"
class="button button-highlight button-rounded button-large"
>Go</a
>
|
Go
1
2
3
4
5
6
| <a
style="color: #FFF;"
href="#"
class="button button-highlight button-pill button-large"
>Go</a
>
|
Go
1
2
3
| <a style="color: #FFF;" href="#" class="button button-caution button-jumbo"
>Go</a
>
|
Go
1
2
3
4
5
6
| <a
style="color: #FFF;"
href="#"
class="button button-caution button-rounded button-jumbo"
>Go</a
>
|
Go
1
2
3
4
5
6
| <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
2
3
4
5
6
| <a
style="color: #FFF;"
href="#"
class="button button-royal button-rounded button-giant"
>Go</a
>
|
Go
1
2
3
4
5
6
| <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
4
5
6
7
| <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
2
3
4
5
6
| <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
2
3
4
5
6
| <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
3
| <a style="color: #FFF;" href="#" class="button button-3d button-caution"
><i class="fa fa-camera"></i> Go</a
>
|
Go
1
2
3
| <a style="color: #FFF;" href="#" class="button button-3d button-royal"
>Say Hi!</a
>
|
Say Hi!
突起样式的按钮
1
2
3
4
5
6
| <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
3
| <a style="color: #FFF;" href="#" class="button button-raised button-caution"
><i class="fa fa-camera"></i> Go</a
>
|
Go
1
2
3
| <a style="color: #FFF;" href="#" class="button button-raised button-royal"
>Say Hi!</a
>
|
Say Hi!
1
2
3
4
5
6
| <a
style="color: #FFF;"
href="#"
class="button button-raised button-pill button-inverse"
>Say Hi!</a
>
|
Say Hi!
光晕效果
1
2
3
4
5
6
| <a
style="color: #FFF;"
href="#"
class="button button-glow button-rounded button-raised button-primary"
>Go</a
>
|
Go
1
2
3
4
5
6
| <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
2
3
4
5
6
| <a
style="color: #FFF;"
href="#"
class="button button-glow button-rounded button-highlight"
>Go</a
>
|
Go
1
2
3
4
5
6
| <a
style="color: #FFF;"
href="#"
class="button button-glow button-rounded button-caution"
>Go</a
>
|
Go
1
2
3
4
5
6
| <a
style="color: #FFF;"
href="#"
class="button button-glow button-rounded button-royal"
>Go</a
>
|
Go
各种文字样式
button-uppercase
1
2
3
| <a style="color: #FFF;" href="#" class="button button-uppercase button-primary"
>uppercase</a
>
|
uppercase
button-lowercase
1
2
3
| <a style="color: #FFF;" href="#" class="button button-lowercase button-primary "
>lowercase</a
>
|
lowercase
button-capitalize
1
2
3
| <a style="color: #FFF;" href="#" class="button button-capitalize button-primary"
>capitalize</a
>
|
capitalize
button-small-caps
1
2
3
| <a style="color: #FFF;" href="#" class="button button-small-caps button-primary"
>small caps</a
>
|
small caps
