Custom Buttons in HTML - Button with Background Image
(Page 4 of 4 )
Button with Background Image
Instead of a background color you can have a background image. To do this, create an image with your drawing tool. Add the following code to the button syntax in your CSS:
background-image: url(image.gif)
where you have to replace image.gif with the URL of your image.
After this you have to decide which colors to use for the borders when the button is not pressed and when it is pressed. When the button is not pressed, the left and top borders take a similar but lighter color to the overall color of the image and the right and bottom borders take a similar but darker color to the overall color of the image. When the button is pressed, the reverse is true. You change these colors using JavaScript as we did above.
Button with a Gradient Image
If you have an area of a picture made of lines, and the lines are slowly changing colors as your eye moves from one position to another, that area is a gradient. You must have seen some of these as background in web pages. You can also have that kind of background for your button.
One way to achieve this is to use your drawing tool to create a gradient, save the result as an image and then use a URL link to put this as the background of your button. The problem here is that pictures take a long time to be downloaded (to appear in the user’s browser).
The solution is this: if you want a horizontal gradient, create a gradient whose height is that of your button and whose width is 1 pixel, using your drawing tool. Save the image in a directory (folder). Use a URL link to link it as background to your button. Use CSS as shown below, to repeat it all over the required background of your button.
If you want a vertical gradient, create a gradient whose width is that of the content area of your button and whose height is 1 pixel, using your drawing tool. Save the image in a directory (folder). Use a URL link to link it as background to your button. Use CSS as shown below, to repeat it all over the required background of your web page.
To repeat a background image horizontally, have code like the following in your CSS.
button {background-image: url(image.gif); background-repeat: repeat-x}
To repeat a background image vertically, have code like the following in your CSS.
button {background-image: url(image.gif); background-repeat: repeat-y}
Conclusion
You can create a custom button by modifying the appearance of the Button element. All the properties and events of the button element will still be available.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 13 
