在前段时间发表过一个关于 用户体验的文章，今天针对按钮做一些研究吧

在目前我负责的WEB项目里按钮大概为 红色，黑色两种颜色，大中小三种规则尺寸，且都是纯色的背景，难道这就是传说中的扁平化么？

我的思路是这样：

定义一个按钮的基类，可以在A标签，或者button/input标签上应用，然后可再扩展出规则的类，颜色的类。看代码。。。

/*按钮基类*/
.ui-btn{
    /*不让用户选中，模拟按钮，参考自github*/
    user-select:none;-moz-user-select: none;-webkit-user-select: none; -ms-user-select: none;

    display:inline-block;
    *display:inline;
    *zoom:1;
    background-color:#fe555a;
    color:#fff;
    text-align:center;
    padding:0 20px;
    font-size:14px;
    height:30px;
    line-height:30px;
    cursor:pointer;
    border-radius:4px;
    border:none;
    width:auto;
    text-decoration:none;

    /*让按钮没有黄色的小框框，但某大神说不要干涉浏览器的行为。。。*/
    /*outline:none;*/
}

/*按钮滑过*/
.ui-btn:hover{
    text-decoration:none;
    color:#fff;
    background-color:#e1393e;
}

/*按钮按下*/
.ui-btn:active{
    background-color:#bb312d;
    box-shadow:inset 2px 2px 6px #ab2925;
}

然后只要应用这个样式就可以把基本的状态搞定，如图：

你有木有发现在IE7-下应用在button,input标签上的padding会是双倍？

解决IE7下按钮双填充的问题

input,
button{
    *overflow:visible;
}

那么小伙伴们，咱来扩展样式让她更美丽吧。啦啦啦

扩展按钮

/*扩展*/
/*黑按钮*/
.ui-btn-black{
    background-color:#3d4450;
}
.ui-btn-black:hover{background-color:#5f6c83;}
.ui-btn-black:active{
    background-color:#2f343e;
    box-shadow:inset 2px 2px 6px #292e38;
}

/*大号按钮*/
.ui-btn-big{
    height:40px;line-height:40px;
    padding:0 30px;
    font-size:16px;
}

现在你只要应用 .ui-btn 就是默认按钮，再加上 .ui-btn-big 就会变成大按钮， 如果再加上 .ui-btn-black 就是黑色按钮，俺是感觉很方便。。。然后重置的段子来了啊。。。

是否应该给按钮加loading?

loading， 顾名思义就是等待，我感觉分场景，如果说是一个表单的提交，那么来个loading状态岂不是福利么？ 因考虑到只想改变按钮的class就显示loading类，那么就得小改下html的结构了。。。

A标签
<a href="#" class="ui-btn">
    <span>我是A按钮</span>
</a>

Button标签
<button class="ui-btn">
    <span>我是Button标签</span>
</button>

注： 因为input标签不能嵌套标签，故都采用button标签代替

添加loading的样式，因为一般的等待样式表现为灰色，表示不可用状态，那么我们再加个“禁用”的状态，看代码：

/*loading效果*/
.ui-btn.loading > span{
    background:url('http://static.meishichina.com/v6/img/loading-16-16.gif') left center no-repeat;
    padding-left:26px;
}

/*添加置灰样式*/
.ui-btn.loading,
.ui-btn.loading:hover,
.ui-btn.loading:active,
.ui-btn.disabled,
.ui-btn.disabled:hover,
.ui-btn.disabled:active,
.ui-btn[disabled],
.ui-btn[disabled]:hover,
.ui-btn[disabled]:active{
    cursor:default;
    color:#fff;
    background-color:#ddd;
    text-decoration:none;
    outline:none;
    box-shadow:none;
}

然后在按钮上添加 loading 就可以“享受”等待的过程了，这里不得不提到 aliceui的规范，确实很赞， 但我还是喜欢把状态的类单独的独立出来，比如：

loading等待,current高亮,disabled禁用,hover滑过,focus聚焦,blur离开焦点,checked选中等常用的提出来，开发人员不得以这些状态单独的起class，必须通过某类继承。比如： .ui-btn.loading{} 等（ps:ie6小心点哦，在这里庆幸下我不需要支持IE6）

loading和禁用的效果如下：

注意：

• 是A标签，则添加disabled类，但因为CSS样式只是“做做样式”，真正的禁用还需要js阻止事件，或者href=javascript:;你懂的。。。
• 如果是Button标签，则可以直接添加个disabled属性，那么jQuery等绑定的事件会直接不执行，帅到爆。

PS: 这里不得不提下TX的漂流瓶里的小loading，对了，首先声明，我是好人。。。看图：

他用的一个小的git图来模拟。。。加载的状态，很是帅气 点击查看loading图片

在移动端的应用

上面的方案在移动端也好使，只是loading的git图貌似不行，有黑底闪烁。。。于是我又想起这么干。。。

由于按钮的目标文案未知，所以我想的是给按钮内部添加2个span标签，然后通过是否loading来切换显示哪个span标签，当然如果你的文案比较大众，比如：提交->提交中..., 发表-> 发表中... 那么完全可以用after伪对象实现。。。

A标签
<a href="#" class="ui-btn ui-btn-h5">
    <span>加载</span>
    <span>加载中</span>
</a>

Button标签
<button class="ui-btn ui-btn-h5 loading">
    <span>加载</span>
    <span>加载中</span>
</button>

/*移动端兼容*/
.ui-btn.ui-btn-h5 > span{
    display:none;
    padding-left:0;
    background:none;
}
.ui-btn-h5 > span:first-child{
    display:inline;
}
.ui-btn-h5.loading > span{
    display:inline;
}
.ui-btn-h5.loading > span:first-child{
    display:none;
}

注：移动端的按钮尽量让其大点，虽说大多说妹子都是芊芊玉手，但也有男人和女汉子嘛。

如图：

当然， @贤心 说移动端可以用Png的图+css3旋转， @dem说他用的是上面方案， 意思都差不多，关键看你项目的UI风格走的哪个路线，最后我想说，对用户友好是不是就是用户体验？

完整demo点这里