Buttons with Images

If you have used Live.com, one of Microsoft’s search engines, you may have noticed that the submit button for their search is not a default button in HTML. There are two different ways you can do this with a little bit of CSS and a graphic. To start out you may want to create a graphic for you to use. I quickly create similar magnifying glass button, like the one on Live.com. Here is what mine looks like, and the one we will be using in this tutorial.

In HTML, there are at least four ways to create a button. There are three input types, submit, reset, and button. There is also the button tag. To follow HTML standards we will us both the input type button, and the button tag, although the same practice can be applied to the submit and reset button. If you do apply the technique to either of those input types remember to change the value of the buttons to value=”". This will keep the words Submit, and Reset from showing up on your button.

Now let us look at the CSS part of the code.

.search_button{
background: url(images/search.jpg) no-repeat;
width: 25px;
height: 25px;
}

Yes, the CSS is that simple to create this effect. The part that is most important to the effect is the background image, which we have located on the server, in this case images/search.jpg. The width and height are not needed to create the effect, but are nice to make for sure you have complete control over the button. Now for the HTML.

<button class=”search_button”></button>
<input type=”button” class=”search_button”>

Now our buttons will have the image we created on it. This is a great visual way to direct users to your search bar. You an also use this for such things a upload buttons where there is an arrow pointing upwards, or for downloads. It also makes the default buttons not as boring, and allows you to design them to fit into your site. You no longer have to design around the buttons, but you can design the buttons around your design.