按钮样式的研究
发布在我的前端之路2015年6月15日view:7471
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

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

在目前我负责的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按钮双倍填充

解决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和禁用的效果如下:

按钮loading和禁用效果

注意:

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

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

漂流瓶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点这里

评论
发表评论
6年前
赞了此文章!
6年前
赞了此文章!
6年前
赞了此文章!
6年前

@深蓝 已修,3q

6年前

潜逃=>嵌套 别字

6年前

写的不错,继续加油!~

WRITTEN BY
前端小武
爱前端, 爱生活
TA的新浪微博
PUBLISHED IN
我的前端之路

第一次在乱炖上写专栏, 好激动... 不敢说每个都是在乱炖上原创, 但每个都是我原创, 记录我的的那些为前端而疯狂的青春...

我的收藏