2009-12-15 23 views
0

當你輸入「谷歌」到谷歌,你會看到有一個+按鈕如何用CSS創建+按鈕?

顯示股票報價GOOG

Firebug的,你可以看到<div class="csb mbi">,是什麼的內容類

CSB MBI

我想創建這樣一個按鈕,點擊它後,它會變成一個 - 按鈕。怎麼做?

回答

2

該按鈕實際上只是一個圖像。 Google會加載一張包含大量鏈接和圖片的圖片,並調整背景的顯示以顯示他們想要展示的作品。

這些是實現他們正在做的事情所需的主要風格。

background:transparent url(/images/nav_logo7.png) no-repeat scroll 0 0; 
height:13px; 
overflow:hidden; 
width:13px; 
background-position:-91px -74px; 

您可以通過在使用FireBug時檢查CSS來找到所有這些。

+0

這是什麼形象的來源?我想下載它。 – Steven 2009-12-15 14:29:54

+0

http://www.google.com/images/nav_logo7.png – 2009-12-15 14:32:19

+3

@Steven我希望您知道,在您的項目中重複使用此按鈕很可能違反了Google版權 – jitter 2009-12-15 14:34:18