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:
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!
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
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:
| 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';" /> |
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!
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
No comments:
Post a Comment