Create a simple button form from a image

We need to put inside a html form a button and we want to use an existing image to build this button.

¿What is the problem?

The problem, is the most common in the field of software development , there is no time or money to pay a designer to create a button. The first approach to the solution is to use a button like this:

whose code is

1

<input type=image src="http://mergetag.com/wp-content/uploads/2012/01/exp_exel.jpg" width="113" height="30" alt="exel"/>

But,  when we put the mouse on the button, there is not the typical effect of push a button.

And the solution is…

With css you can create many effects, and one of this is the effect of a pressed image when you pass the mouse over the image.

The only thing you need is to add this style to your css sheet:

1

.blbtnp:hover {	cursor: pointer;	cursor: hand;	position: relative;	left: 1px;	top: 1px;	border: none;}

And add the style to the button, for example:

1

<img id="botonExportarExcel" class="blbtnp aligncenter" src="http://mergetag.com/wp-content/uploads/2012/01/exp_exel.jpg" alt="exel" width="113" height="30" />

Conclusion…

It´s a simple method to have a button from a image with the effect of a button and you only need to add a new style to your css sheet.

This can be used for text, links o whatever html element you want.

Tags: css, design

Category: Others