Как создать кнопку + с помощью CSS?

Question

При вводе «Google» в Google, вы увидите, есть кнопка +

Показать котировки акций для GOOG

С поджигатель, вы можете увидеть <div class="csb mbi">, что содержание в класс

CSB MBI

Я хочу создать такую ​​кнопку, d после щелчка, он станет кнопкой -. Как это сделать?

Answer 1

Вот пример с кнопкой +/-, без каких-либо изображений. Весь текст и CSS.

http://jsbin.com/ikeca

alt text http://i47.tinypic.com/mcvjg9.jpg

Answer 2

Кнопка на самом деле просто изображение. Google загружает изображение, которое содержит кучу ссылок и изображений для своего сайта, и просто корректирует отображение фона, чтобы показать часть, которую они хотят показать.

Это основные стили, необходимые для достижения того, что они делают.

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

Вы можете найти все это, изучив CSS, когда используете FireBug.

Answer 3

именно это изображение:

http://www.google.cz/images/nav_logo7.png 

для проверки этих вещей, используйте поджигатель:

http://www.firebug.com