前几天在互联网上看到alexwolfe制作的Button库，觉得很有意思，特意花了些时间学习了一下这个库的源码与使用。今天花了点时间将期整理与大家分享。

Button库并不是简单的一个CSS制作的Button库，在这里alexwolfe大师采用了SASS和Compass进行开发和维护的。或许有些同学看到这两个东东会觉得很蛋疼，不知道怎么使用，其实没有那么恐怖的，只要你略懂CSS，就完全可以使用这个按钮库，大不了直接git下来他的CSS到你的项目中，这样也能使用，只不过你要按你的设计风格来调整就略会麻烦些。

好久没有处理过IE6下的兼容问题了，今天有朋友碰到过input[type="submit"]和button[type="submit"]在IE6-7下会出现黑边，就算是你在样式中重置了一个border属性也是如此。真是蛋疼的很。后来经过查找相关的资料，终于找到了解决方法，放上来与大家分享一下，这个问题有可能不只一个人会碰到。(^_^)

在介绍如何处理这个bug之间我们一起来回顾一下，在IE6-7下，input[type="submit"]和button[type="submit"]存在的问题还不仅是这个，常见的有：button在IE67下的宽度兼容问题、button的行高问题（各浏览器下解析不一样）、button的outline问题，甚至submit在ios下也存在问题。这么多烦人的事，苦逼了前端人员，（具体解决方案可以点击这里查看）。今天就在为大家增加一个问题的解决方案——如何去除IE67下按钮的黑边框

自从完成上次iPhone的几个页面效果后，一直在没有制作iPhone的页面效果了，今天在公司写了一个登录页面效果，让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari浏览器下圆角有一个bug”。下面我来简单的描述一下这个bug的样子：

初载入页面后，表单中的input[type="submit"]和input[type="reset"]按钮渲染成下图的样子：

奇怪的是你点击以后就会正常：

对比一下，你也会觉得怪，怪都算了，还不知道如何下手:

Nicolas Gallagher在Pure CSS GUI icons中使用纯CSS3制作的各种ICON的DEMO，让我再次领会了CSS3的强大。

Google+的“button”效果一直都吸引了我，早就想亲手去体会一下这样的感觉，但一直给自己找借口，直到最近几天，终于动手一试了，试后才知道，他们做的真NB。Google+的UI Buttons形成了一个制作“按钮”、“图标按钮”、“带有标签的图标按钮”、“下拉按钮”、“tip按钮”等按钮的工具或者说UI Buttons框架，使用这一套“UI Button”将会给你的工作带来极大的速度与视觉冲击效果。

那么我们今天的目的就是来看看Google+的攻城师是怎么写的这个代码。因为只有通过代码，我们才能知道其中的原理与制作过程。

HTML Markup:

老样子，首先就需要他的HTML Markup是怎么写的，因为我们在实际应用中这一块是不可缺少的，如果没有这一块，你就无法继续下去，俗话说得好“巧妇难为无米之炊”。下面我们不说别的，直接上代码才是王道：

有关于CSS3制作buttons，本站前面介绍了多个案例：

outline的使用，大家都喜欢在reset样式表中直接重置：

    * {
      outline: none;
    }
  

Eric Meyers在他的CSS Reset是这样重置的：

昨天在《表单button的行高问题》一文中简单的描述了一下表单中的“button”（包括input[type="submit"]/input[type="reset"]/button）行高在Firefox和Opera中不以按设置值解析。今天我想和大家一起来说表单中“button”的“text-indent”属性在IE中的bug。

首先我们来看一个实例：

HTML Markup

    <input type=”submit” value=”Submit” id=”btn” />
  

CSS Code

昨天下午为之给我发了一个有关于button的line-height问题的文章——《The Firefox Input Button Line-Height Bug》。看后明白了许多，顺便整理了一下，与大家一起知道这个问题。

下面我们先来看一个Demo的实例：

HTML Code

    <input type="submit" id="button" value="engage"/>
  

CSS Code

现在使用CSS3属性制作Buttons越来越普及了。早前在站上也放了一些相关方面的制作方法，在《CSS3 Gradient Buttons》一文中第一使用CSS3的Gradient、Border-radius、box-shadow等属性制作了Buttons。