how to create a cool button for your website

With this post I will show you how to create a cool button to use in your webpages or anywhere you want for free!
In my I case I wanted to add a download button for the code parts I post here.

Go to Cool Text Graphics Generator
And go down to Choose a Button Design and select the button you like

Write your text and select the disired fonts and colours.
In my case the text was "DOWNLOAD".
Filled the colours and selected Text Offest Y = -5 (move the text 5 pixels up from the center)
For Mouse over I selected Glow.
Now hit the button "Render Button"
Here you see two images. One for the normal button and one for the mouseover trigger.
Just save/download the first image. e.g. mybutton.png
Mine is

Click "Edit this logo" and change Text Offest Y to 0 and click again "Render Button"
Now save the second image. e.g. mybuttonMouseOver.png
Mine is

Now we have the two images we need. We just have to upload them somewhere.
There are a lot of free web host and space providers for your files. Just choose who you like.
Let's say you uploaded the two pictures to the address http://myurl/

To display the picture you write the following html:
1. 2. 3.<img src="http://myurl/mybutton.png" border=none onmouseover="this.src='http://myurl/mybuttonMouseOver.png';" onmouseout="this.src='http://myurl/mybutton.png';" />

Wait a minute here... We are not done. We just show the picture without any link...
Fortunately is easy to add link to the above picture. Let's say you want a link to http://mylink
then add before the <img...
<a href=""> and at the end close it by adding </a>

That's it! Now you have a cool button linking anywhere you want like my cool Download button!

This is a test button

Use alt tag to show some text if picture is not available. e.g.
<img src="http://myurl/mybutton.png" alt="Download The Code" ....

Thank you for reading my posts. Any comments are appreciated

No comments:

Post a Comment