18541

How to create the + button with CSS?

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?

Answer1:

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>

Answer2:

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.

Answer3:

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>

Recommend

  • JQuery load doesn't seem to process ?
  • Other operator in calculation chain than combineLatest to avoid redundant calculations
  • jquery datatables FixedColumns not defined
  • PHP file_exists() anomaly
  • MVVM: Image Bind Source from FileOpenPicker
  • Display validation errors inside
  • Image map in Flex
  • pillow imaging ImportError
  • How can I display the parent menu item's description using Wordpress walkers?
  • Android application: how to use the camera and grab the image bytes?
  • How to view images from protected folder with php?
  • How does document.ready work with angular element directives?
  • Using a canvas object in a thread to do simple animations - Java
  • Adjust width of select element according to selected option's width
  • Moving Android View and preventing onDraw to be called over and over again
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • Keep this build forever option - Jenkins
  • HTTP/2 streams vs HTTP/1.1 connections
  • Python urlparse: small issue
  • Syntax for setting draggablecursor property in google maps api
  • FileReader+canvas image loading problem
  • Resize panoramic image to fixed size
  • recyclerView does not call the onBindViewHolder when scroll in the view
  • Modifying destination and filename of gulp-svg-sprite
  • MySQL WHERE-condition in procedure ignored
  • To display the title for the current loaction in map in iphone
  • Web-crawler for facebook in python
  • GridView Sorting works once only
  • bootstrap to use multiple ng-app
  • How to get icons for entities from eclipse?
  • trying to dynamically update Highchart column chart but series undefined
  • Error creating VM instance in Google Compute Engine
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Hits per day in Google Big Query
  • how does django model after text[] in postgresql [duplicate]
  • Change div Background jquery
  • Turn off referential integrity in Derby? is it possible?
  • python draw pie shapes with colour filled
  • JaxB to read class hierarchy
  • java string with new operator and a literal