6/6/09

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.

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

Step2:
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




Step3:
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


Step4:
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:

<img src="http://myurl/mybutton.png" border=none
onmouseover="this.src='http://myurl/mybuttonMouseOver.png';"
onmouseout="this.src='http://myurl/mybutton.png';" />


Step5:
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="http://akomaenablog.blogspot.com"> 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


Tip:
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

6 comments:

Anonymous said...

How did you learn all that? 0_0

Canon Ink said...

This is really cool.. Thanks for sharing.. You do got lots of useful tips and tutorials on your blog. It's just too many to absorb at the moment. =) will definitely come back for more soon.. thanks man.

shobhana bhardwaj said...

This is one of the most incredible blogs Ive read in a very long time. The amount of information in here is stunning, like you practically wrote the book on the subject. Your blog is great for anyone who wants to understand this subject more. Great stuff; please keep it up!
top aieee coaching centers
Coaching institute for iit jee in delhi

Κατασκευή ιστοσελίδων said...

Thank you. Very usefull post

Anonymous said...

Fantastic site, very interesting content, boomarked ! I 'm a community member at
http://www.pc-safe.net/

ΠΥΡΟΤΕΧΝΗΜΑΤΑ said...

Thank you about code.
I will try it on my site