2016-11-18 80 views
-2

他们如何使与阴影的3D按钮,为他们doodle AI thingGoogle是如何制作这些3D按钮的?

他们看起来像这样:

picture of the google button in question

我在CSS窥探左右,但没有什么特别的元素的样式。

编辑:如果你要瞬间downvote,你能告诉我为什么,所以我可以尝试解决这个问题?

+1

背景图片(精灵)https://quickdraw.withgoogle.com/static/svg/buttons_large.svg,使用Firebug或开发人员的工具F12来检查 – Grasper

+0

如果你想知道......他们使用':active'状态来切换 – DaniP

+1

的位置,因为通过检查元素很容易发现他们是如何做到的。在几乎所有的浏览器中,您都可以右键单击该元素,然后点击“检查元素”(Chrome中的“检查”)。在右侧栏中,它会向您显示与该确切元素相关的CSS。你不必扫描所有的CSS规则来找到它。 –

回答

1

你没有窥探很辛苦......

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