How to Make Tag Buttons for Your Website
Tag buttons add an extra dimension to your website, as they can be used to transfer the web surfer to another section of the website and can be used as submit buttons in comment sections. Creating this type of button offers you an opportunity to be creative, as you can customize the text and background embedded in the button and construct a button that suits your website's overall theme. Tag buttons increase the convenience of your website and provide the web user every opportunity to take full advantage of what is on offer.
Other People Are Reading
Instructions
-
-
1
Open your website index.html file first and locate where you want the tag button to be situated.
-
2
Formulate the composition of the tag button using <button>... </button>.
-
-
3
Enter the desired text in between the containment tags, or if you want to modify the color use the formula:
<button style="color: red"><b>Enter Text Here</b></button>
If you want to change the font use this example:
<button style="font: bold 14px Times New Roman">Enter Text Here</button>
-
4
Use <img src="Enter Image Url Here"/> to embed the tag button with an image.
-
5
Customize the background of the button using:
<button style="background-color:red">Enter Text here</button> or
<button style="background-image:url(Enter Image Url Here)"><b>Enter Text Here</b></button>
-
6
Control the dimensions of your tag button to suit your preferences by altering the width and height, using the formula:
<button style="width:100;height:100">Enter Text Here</button>
-
7
Link your tag button to an external URL according to this example:
<button onClick="window.location='http://www.ehow.com">Home</button>.
-
8
Employ the tag button as a form button to add comment sections to your website. This example displays a form with a submit and a reset button:
<form>
<input type="text" size="25" /><br />
<button type="submit"><b>Submit<b></button>
<button type="reset"><b>Reset</b></button>
</form>
-
1
Tips & Warnings
To create a URL for an image, upload it to an image hosting website such as TinyPic, Photobucket or ImageShack.
References
Resources
- Photo Credit http, www, icon, web, website image by creative from Fotolia.com
