Question:

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

<blockquote>

Show stock quote for GOOG

</blockquote>

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

<blockquote>

csb mbi

</blockquote>

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

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

<a href="http://jsbin.com/ikeca" rel="nofollow">http://jsbin.com/ikeca</a>

<a href="http://i47.tinypic.com/mcvjg9.jpg" rel="nofollow">alt text http://i47.tinypic.com/mcvjg9.jpg</a>

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.

it's this image:

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

for inspecting those things, use firebug:

<a href="http://www.firebug.com" rel="nofollow noreferrer">http://www.firebug.com</a>