Google 是如何制作这些 3d 按钮的？ [关闭]答案

【问题标题】：How did Google make these 3d buttons? [closed]Google 是如何制作这些 3d 按钮的？ [关闭]
【发布时间】：2016-11-18 21:13:14
【问题描述】：

他们是如何为doodle AI thing 制作带有阴影的 3d 按钮

它们看起来像这样：

我在 CSS 中窥探了一番，但元素的样式并没有什么特别之处。

编辑：如果您要立即投反对票，您能告诉我原因，以便我尝试解决问题吗？

【问题讨论】：

背景图片(sprite)quickdraw.withgoogle.com/static/svg/buttons_large.svg，使用firebug或者开发者工具F12检查
如果你想知道......他们使用:active 状态来切换位置
我投了反对票，因为通过检查元素很容易发现他们是如何做到的。在几乎所有浏览器中，您都可以右键单击元素并单击“检查元素”（Chrome 中的“检查”）之类的内容。在右侧边栏中，它将向您显示与该确切元素相关的 CSS。您无需扫描所有 CSS 规则即可找到它。

【解决方案1】：

It's a background image sprite:

【讨论】：

【解决方案2】：

你并没有非常努力地窥探......

.button.button-yellow, 
.button.button-green, 
.button.button-medium-gray
{
    background-image: url(/static/svg/buttons_large.svg);
}

【讨论】：