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.
Category: Others