Home arrow HTML arrow Page 4 - Custom Buttons in HTML
HTML

Custom Buttons in HTML


The default buttons produced by the tag <input type="button" value="Function-Mane"> or <button type="button">Function-Name</Button> are gray in color. The gray button color suits many backgrounds, just as the white shirt suits many colors of trousers. There are times when you need a different color shirt for a particular color of trousers. In a similar way there are times when you would need a button of a different color for your particular web page background.

Author Info:
By: Chrysanthus Forcha
Rating: 4 stars4 stars4 stars4 stars4 stars / 51
May 07, 2008
TABLE OF CONTENTS:
  1. · Custom Buttons in HTML
  2. · Colored Button
  3. · Colored Button continued
  4. · Button with Background Image

print this article
SEARCH DEVARTICLES

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.

blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials