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]

@dimlau NO redundant boxes outside / inside.
就是不喜欢用图片，实在是不够酷。

[dimlau]

呃⋯⋯

我的RSS标（思路从一国外大牛那里顺来的，修改了CSS），结构：
<aside class="rss"><a href="atom.xml" title="订阅更新">RSS<q class="dot"></q><q class="inside ring"></q><q class="outside ring"></q></a></aside>

CSS更是一大陀。酷到挺酷的，但是本来可以：

<a href="atom.xml" title="订阅更新">RSS</a>

CSS一句background搞定。

明显纯CSS不够简洁。

当然，你说的“就是不喜欢用图片”，理由也挺充分的，我RSS图标不用图片的理由也差不多——界面里如果能不用就不用图片。

[Sai]

这个还是需要取舍的，我们在研究这个不需要额外的box，而画feed ico需要这么多不必要的box，对IE用户也不友好。

[disinfeqt]

用CSS来画图是很蛋疼的行为，完全没有实用价值，我从来不用。
但是如果在一个 element 里展现出往往需要多个 elements 配合才能完成的效果，那是值得研究的，这就是为什么我花了一下下午的时间来摆弄这些玩意儿。

[disinfeqt]

@Sai 那个登录按钮，三点改进意见：
1. cursor: pointer
2. outline: none
3. hover 不要去掉阴影，active 时去掉

:)

[Sai]

@disinfeqt
outline: none 这个我之前试了，竟然无效=。=

[disinfeqt]

http://grab.by/5DYO
针对IE的 hack... 纯测试，代码未整理...

[brando]

据我所知，小Sai同学做的页面基本上都很让我惊艳，多年前就是了，而且是个很了不得的人。重点是，年龄他还很小噢，很可爱...XD...LOOOOL

[lianghai]

@brando 求继续爆料！可以发在 http://v2ex.appspot.com/t/869 里面 XD

[Sai]

@disinfeqt
改进了，outline依然无解

[disinfeqt]

@Sai 哦 没看到你说无解，加一个 ::-moz-focus-inner{border:none;padding:0;}

[disinfeqt]

还有，在元素内加一个 -moz-outline-style:none;

[Sai]

@disinfeqt
thx,it's works

[disinfeqt]

@Sai ur welcome. btw, "it works"...

=__________________=

[Sai]

@disinfeqt
=。=师太师太，其实我还纠结了一下那个「点」和t的……

[disinfeqt]

@Sai
=___________________________________________________=