Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
alice button style
CSS
branch: master

merge

latest commit 16ffbe81b3
@afc163 afc163 authored
Failed to load latest commit information.
src merge
.gitignore fix gitignore
HISTORY.md migrate spm@3.x
README.md add green button, bump 1.2.0
button.css move main file outside src
package.json move main file outside src

README.md

button


全站通用按钮组件,无图片纯 css 实现,IE8 以下无圆角。

可以很方便的和 alice.iconfont 配合使用。


a { color: #08c; } a:hover { color: #000; } a:active { color: #f60; }

演示

橙色按钮 a

<a href="javascript:;" class="ui-button ui-button-lorange">橙色大按钮</a>
<a href="javascript:;" class="ui-button ui-button-morange">橙色中按钮</a>
<a href="javascript:;" class="ui-button ui-button-sorange">橙色小按钮</a>

橙色按钮 input

<input type="button" class="ui-button ui-button-lorange" value="橙色大按钮">
<input type="button" class="ui-button ui-button-morange" value="橙色中按钮">
<input type="button" class="ui-button ui-button-sorange" value="橙色小按钮">

橙色按钮 button

<button class="ui-button ui-button-lorange">橙色大按钮</button>
<button class="ui-button ui-button-morange">橙色中按钮</button>
<button class="ui-button ui-button-sorange">橙色小按钮</button>

白色按钮 a

<a href="javascript:;" class="ui-button ui-button-lwhite">白色大按钮</a>
<a href="javascript:;" class="ui-button ui-button-mwhite">白色中按钮</a>
<a href="javascript:;" class="ui-button ui-button-swhite">白色小按钮</a>

白色按钮 input

<input type="button" class="ui-button ui-button-lwhite" value="白色大按钮">
<input type="button" class="ui-button ui-button-mwhite" value="白色中按钮">
<input type="button" class="ui-button ui-button-swhite" value="白色小按钮">

白色按钮 button

<button class="ui-button ui-button-lwhite">白色大按钮</button>
<button class="ui-button ui-button-mwhite">白色中按钮</button>
<button class="ui-button ui-button-swhite">白色小按钮</button>

不可用按钮 a

<a href="javascript:;" class="ui-button ui-button-ldisable">灰色大按钮</a>
<a href="javascript:;" class="ui-button ui-button-mdisable">灰色中按钮</a>
<a href="javascript:;" class="ui-button ui-button-sdisable">灰色小按钮</a>

不可用按钮 input

<input type="button" class="ui-button ui-button-ldisable" value="灰色大按钮">
<input type="button" class="ui-button ui-button-mdisable" value="灰色中按钮">
<input type="button" class="ui-button ui-button-sdisable" value="灰色小按钮">

不可用按钮 button

<button class="ui-button ui-button-ldisable">灰色大按钮</button>
<button class="ui-button ui-button-mdisable">灰色中按钮</button>
<button class="ui-button ui-button-sdisable">灰色小按钮</button>

蓝色按钮 a

<a href="javascript:;" class="ui-button ui-button-lblue">蓝色大按钮</a>
<a href="javascript:;" class="ui-button ui-button-mblue">蓝色中按钮</a>
<a href="javascript:;" class="ui-button ui-button-sblue">蓝色小按钮</a>

蓝色按钮 input

<input type="button" class="ui-button ui-button-lblue" value="蓝色大按钮">
<input type="button" class="ui-button ui-button-mblue" value="蓝色中按钮">
<input type="button" class="ui-button ui-button-sblue" value="蓝色小按钮">

蓝色按钮 button

<button class="ui-button ui-button-lblue">蓝色大按钮</button>
<button class="ui-button ui-button-mblue">蓝色中按钮</button>
<button class="ui-button ui-button-sblue">蓝色小按钮</button>

绿色按钮 a

<a href="javascript:;" class="ui-button ui-button-lgreen">绿色大按钮</a>
<a href="javascript:;" class="ui-button ui-button-mgreen">绿色中按钮</a>
<a href="javascript:;" class="ui-button ui-button-sgreen">绿色小按钮</a>

绿色按钮 input

<input type="button" class="ui-button ui-button-lgreen" value="绿色大按钮">
<input type="button" class="ui-button ui-button-mgreen" value="绿色中按钮">
<input type="button" class="ui-button ui-button-sgreen" value="绿色小按钮">

绿色按钮 button

<button class="ui-button ui-button-lgreen">绿色大按钮</button>
<button class="ui-button ui-button-mgreen">绿色中按钮</button>
<button class="ui-button ui-button-sgreen">绿色小按钮</button>
Something went wrong with that request. Please try again.