Question: I have been trying to figure out how the search button on YouTube (the magnifying glass button) is styled, and upon inspection it is just a button: 

```
   <button class="yt-uix-button yt-uix-button-size-default yt-uix-button-default search-btn-component search-button" type="submit" onclick="if (document.getElementById('masthead-search-term').value == '') return false; document.getElementById('masthead-search').submit(); return false;;return true;" dir="ltr" id="search-btn" tabindex="2"><span class="yt-uix-button-content">Search</span></button>

```

I have been trying to figure out where the image of the magnifying glass is coming from, as there is no source for the image. As far as I can tell, the class of the button span, "yt-uix-button-content" is serving the image from [this sheet](http://s.ytimg.com/yts/imgbin/www-hitchhiker-vflVV84g4.webp). 

What is this technique called, and how does it work? Or am I barking up the wrong tree?

Answer: 
This is the image sprite for that button: <https://s.ytimg.com/yts/imgbin/www-hitchhiker-2x-vflPBoHOV.webp>

CSS allows you to define a 'background-image' of an element (the search button), a 'background-position', and the width of the button.

Using that you can change the background-position coordinates and you can display all of the images for a website from a single image.

The advantage to doing this is because then there is only one HTTP request, rather than hundreds for all of those images.

I found this jsfiddle that might help: <http://jsfiddle.net/2zLfsm02/>

```
.test:hover, button:hover span.test{
  background: url("https://s.ytimg.com/yts/imgbin/www-hitchhiker-vflKml5Tv.png") no-repeat scroll -128px -298px rgba(0, 0, 0, 0) !important; 
}

```
The technique is called CSS Sprites. In this technique all the images are combined as one image and the are called to particular position where they needed. 

Benefit of doing this is to reduce http requests and speed up load time of web pages. 
for reference : <http://www.w3schools.com/css/css_image_sprites.asp>