jquery - 使用 jQuery 和/或 CSS 创建此应用程序演示视频中看到的按钮按下效果？

Question

http://youtu.be/sXqXpwyBI1k

请注意，当这个人按下大部分按钮时，按钮会迅速变为其自然颜色的较浅阴影，然后迅速变回其正常颜色，同时它的边框会动画化，就像有另一个元素按钮后面的边框会增加宽度和高度并淡出。

一段时间以来，我一直在尝试创建这种按钮按下效果......我有点烂......所以我想知道它是否可以用 jQuery 和/或 CSS 来完成，或者是否有人见过它在互联网上的某处完成或有示例？

当他输入一个新玩家的名字时会出现这种效果，请在该屏幕上观看。

Answer 1

[编辑] 我很好奇我是否可以在 css 中获得某种扩展边框，所以我将其添加到 fiddle 中

Draconis 的回答很好，jquery animate 可以很好地与较旧的浏览器一起使用，但是 css 转换会更平滑，所以如果您的目标是现代 safari、firefox 和 chrome，它们会很好用。这是一个动画按钮的小例子(这是悬停，而不是点击)

http://jsfiddle.net/dTqkK/2/

当然，两者的结合可能是最好的答案，使用像 Modernizr 这样的东西区分浏览器是否可以支持 css 转换，如果不能则回退到 javascript。