How to create the + button with CSS?

Question

When you input "google" into Google, you will see there is a + button

Show stock quote for GOOG

With firebug, you can see <div class="csb mbi">, what is the content of the class

csb mbi

I want to create such a button,and after clicking it, it will become a - button. How to do it?

Answer 1

The button is actually just an image. Google loads an image which contains a bunch of the links and images for their site and just adjusts the display of the background to show the piece they want to show.

These are the main styles needed to achieve what they're doing.

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

You can find all of this by examining the CSS when you're using FireBug.

Answer 2

it's this image:

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

for inspecting those things, use firebug:

http://www.firebug.com

Answer 3

Here's an example with a +/- button, no images. All text and CSS.

http://jsbin.com/ikeca