Mad Button

[disinfeqt]

Inspired by Rogie on Dribbble.
Pure CSS3 w/o image.
Totally hover-able & clickable, actually I can't stop myself from clicking it since I made it.

http://zdx.in/1rvU5t
http://zdx.in/1rvYd6

lol

[disinfeqt]

http://files.droplr.com.s3.amazonaws.com/files/15286850/1rvU5t.Screen%20shot%202010-07-29%20at%2000%3A55%3A16.png

http://files.droplr.com.s3.amazonaws.com/files/15286850/1rvYd6.Screen%20shot%202010-07-29%20at%2000%3A57%3A20.png

[lianghai]

哈，好可爱！只是感觉按下去之后的边框有点杂乱了，失去了原来状态下的平滑和锐利。

[disinfeqt]

@lianghai 嗯 我只是截了一张图放到PSD里先模仿出来，以后会根据自己的理解和用途改进的。还好，一切都是CSS。

[lianghai]

@disinfeqt 从这里？ http://dribbble.com/shots/33550-Mad-Elements
虽然视角实在有点过于特别了，但还是觉得很好看——那个下拉列表的设计很不错。

[lianghai]

Dribbble 太可爱了！我刚刚才开始了解这个网站。400×300px 的限制就像 Twitter 的字数限制；月初恢复可用的展示额度很有意思。嗯，比 deviantART 更适合我。

[Sai]

稍稍尝试了一下
http://img.ly/1MlE

[disinfeqt]

@Sai Neat. 不妨做居中？

[disinfeqt]

@Sai text-align: left; 擦...

[Sai]

话说这个btn样式可以把mobile safari里面那个巨丑的默认样式覆盖掉

[disinfeqt]

@Sai 你是用什么做的？图？

[Sai]

@disinfeqt Pure CSS…… 详见这个登录按钮 http://bgm.tv/login

[disinfeqt]

Now transforming buttons into anchors...
我才发现，用 a 来做要比 button 简单几百倍... 而 button 的实用性实在不高。

[disinfeqt]

@Sai 质感不给力啊，点击更不给力呀... 老湿...

[Sai]

@disinfeqt
其实我做出了Mad Elements里面的质感，但是和网站风格太不搭调。

(你把
box shadow的0 1px 1px rgba(255, 255, 255, 0.4) inset, 0 -1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 #0F3E75, 0 0 2px rgba(0, 0, 0, 0.5)
改成
0 1px 1px rgba(255, 255, 255, 0.4) inset, 0 -1px 0 rgba(255, 255, 255, 0.3) inset, 0 4px 0 #0F3E75, 0 0 2px rgba(0, 0, 0, 0.5)
就是那种质感了

用a的话submit让移动设备情何以堪

[disinfeqt]

@Sai 囧 我直接用 0 3px 20px #333 inset，方便以后多种颜色。

[disinfeqt]

哈哈，改进了 http://grab.by/5DVa
不知道各位能联想到什么？对！一会儿就来~ XD

[Livid]

好，期待看到。

[disinfeqt]

身为一个按钮，如果没有 http://www.zdxia.com/lab/text-selection.html 的话，鸭梨是很大的。

[lianghai]

想到了 Mac 的键盘……

[dimlau]

其实纯CSS的不见得有多好，从需求出发，一个按钮图片才多大？
纯CSS却（一般）要加很多不必要的盒子进去。

⋯⋯好吧，我承认我blog里的RSS图标也是用纯CSS做的。