Many sites use glassy buttons. Many tutorials try to explain how to build them. It’s detailed work using layers and the like but you don’t have to go through all that because…
One website builds them for you. Take this example (which just changes color on mouseover)…
It took all of about 10 seconds to build and the files necessary for display of the button in three formats (gif, jpg, and png) were zipped into a package along with the options selected in a readme file. Just click on a link and download the package, then use the button.
Best of all: it’s free.
Where is this generator? Here: http://www.netdenizen.com/buttonmill/glassy.php
Enjoy!
[Comments from original 8/2/2009 post.]
Arnie
Said this on 2009-10-28 At 10:38 am
Yes, this site is very helpful in producing fancy buttons quickly.
Yet, I am rather a beginner at this. Could you explain to me, once I have downloaded this file with two jpg files. What HTML code do I use when putting this into my website?
#2
Arnie
Said this on 2009-10-28 At 10:45 am
I found the answer on: technojuice.blogspot.com:
The only drawback is that there is not embed code with the image zip file which would have made this super easy to install, TechnoJuice to the rescue !
Just use this line of code to install and get the mouseover / rollover effect
[deleted]
#3
DaBoss
Said this on 2009-10-28 At 10:48 pm
In reply to #2
Sorry for the delay – was out of town. Yes, you found the answer but you could have also found the same answer by asking your browser to show you the source for this page and then found the reference to the button above and copied that. 🙂 [Just a hint for future explorations.]
#4
Arnie
Said this on 2009-10-29 At 01:49 am
In reply to #3
That’s a great idea!
(anyhow I was having some trouble with the html I found. So now, if I compare the html that I found, with your html — I think I am beginning to understand how to use it)
#5
Arnie
Said this on 2009-11-08 At 05:09 pm
I am confused. Now, after a couple of weeks, I have come back to Netdenizen.com site to make some more buttons.
I remember how to fill in the boxes. But I can’t find a button to click on to produce my newly designed button! Where am I supposed to click?
#7
DaBoss
Said this on 2009-11-08 At 06:39 pm
In reply to #5
You can press the Enter key but the “Reload” button at the top is apparently the proper choice. Make your changes in the various fields, hit the Reload button and observe the results, and then, if you like it, click on the download link.
#6
Arnie
Said this on 2009-11-08 At 05:14 pm
I guess I just figured it out. He wants us to push our ‘enter’ key on our keyboard!
Gosh, why not put a button on the button website titled “Make the button”?
#8
Arnie
Said this on 2009-11-09 At 11:39 pm
Mr. Boss,
This is getting rather lengthy — but I had one more problem which I guess i solved.
(first of all, yes, “Reload” does produce the requested button. I guess I find ‘reload’ as a little confusing. I would prefer something like ‘Make my button’
My new problem was: the text of the button produced was not when shown on my website:
http://choveveitzion.wordpress.com/tris/
I was using the JPEG format of the buttons. Next I tried the GIF version — also not clear.
Finally with the Gif version — vwalla! — the text was clear. Did you find this too?
#9
DaBoss
Said this on 2009-11-10 At 12:01 am
In reply to #8
JPEG images will always be less clear than GIF images as JPEG compresses with losses. GIF compresses without information loss but has a limited color palette so may or may not be clear. PNG also generally uses loss-less compression and a larger palette and so usually produces the best images but some earlier browsers don’t render PNG transparency well. So, there are various trade-offs when using graphics.