2016-11-18 25 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); 
}