button

如何更好的控制按钮样式

在Web页面或应用程序中都可能会有按钮的出现,甚至很多时候链接的样式看起来也像个按钮。那么我们应该怎么来美化按钮的样式呢?在这篇文章中,我们一起来聊聊按钮样式应该怎么才能更好的控制。

Alexwolfe的Button库使用

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

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

如何移除button在IE67下的黑边

好久没有处理过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上submit按钮bug

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

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

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

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

CSS3制作分享按钮

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

Google Plus UI Button制作

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

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

HTML Markup:

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

CSS3伪元素应用——CSS3 Button

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

表单button的outline问题

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

    * {
      outline: none;
    }
  

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

表单button的text-indent问题

昨天在《表单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的行高问题

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

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

HTML Code

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

CSS Code

页面

返回顶部