小小小tip: 按钮文字无缝变菊花

一、时势造英雄

本文介绍的是个很小的tips, 是个很简单很实用的交互效果，就是按钮点击后按钮文字变成菊花，表示我正在进行中。

例如，去苹果官网买iPhone 6的时候：

以前我们实现可能会借助一个额外的标签，比方说：

a href="javascript:" class="button">
         span class="text">
    按钮/span>
         img src="juhua.gif" />
     /a>
    

而本文要介绍的HTML则很简单：

a href="javascript:" class="button">
    按钮/a>

没有额外的标签，也不使用伪元素，完全不影响原本按钮的CSS设置，无缝变化。

可能会疑问，为何我们以前实现要多标签嵌套处理呢？这个呢是受限于当时的历史环境。

所谓时势造英雄。现在这个阶段，我们有2个变化：

1. 浏览器发展。IE6很多企业和团队都不支持；
2. 设计趋势。现在流行扁平化设计，按钮都是纯色背景。

于是，我们就可以以简洁轻松的方式实现按钮文字变菊花的效果。

二、demo实例以及效果

您可以狠狠地点击这里：文字变菊花实例demo

默认时候是这样子（截自Chrome）：

在IE7浏览器下（IE11的IE7模式）如下：

更新于2015年7月25日
后发现，原生的IE7-iE8浏览器并不支持color:transparent, IE11的向下兼容模式都支持该透明关键字，是不准确的。因此，本文的技术点，可能就需要大家再好好斟酌斟酌了。

三、文字变菊花的原理

实现原理跟上面两个时势变化密切相关，主要有2点：

1. transparent关键字。按钮文字变菊花其中的文字隐藏就是使用的color:transparent这个声明，顾名思意，“颜色透明”。由于transparent这个关键字IE6不支持，好像会变成黑色（如果我没记错的话），所以以前在需要兼容IE6的时代，此方法是受阻的。
2. 作为背景图片显示的菊花。由于现在流行扁平化设计，按钮都是纯色背景。所以，我们可以任性一把，让菊花以background-image的形式和按钮背景色(background-color)无阻碍并行显示，然后我们需要的效果了！

假设我们使用类名loading改变我们的按钮状态，则上面原理用代码表示就是：

.loading {
         color: transparent;
        /* 文字消失 */     background: #xxxxxx url(loading.gif) no-rePEat center;
   /* 菊花在背景色中间出现 */ }
    

在实际开发制作的时候，我们不可能就上面两行代码，由于loading态基本上都是disabled态，所以，按钮的hover变化、鼠标手形等都需要重置，所以还需要其他些CSS, 都是行家，都懂的，不展示，demo页面有代码示意，有兴趣可以自行前去围观。

四、结束语

送佛送到西，水文水到底。

没啥好说的，月底了，一个月一篇产出都没有，说不过去，所以在这最后几个小时弄个水文，撑撑场面。

不过，有句话我要说清楚，不是我懒了，实在分身乏术。

下个月应该会好一点。

（本篇完）

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！