Jump to content

Making glass buttons


BuzzKill

Recommended Posts

That is neat.

And if you take the opacity slider from 0 to 255, it looks like a light turning on inside!

~~

Link to comment
Share on other sites

  • 2 weeks later...

I'm sorry I didn't say this earlier, but I used your example glass button for my forum:

SiteAdminGlassButton.png

RuneScapeBorn2killxSig.png

I built my first computer at age 11!

Link to comment
Share on other sites

Cool... where's your forum?

BK_BloodSaw_sig.png

- DO NOT contact me asking for the .pdn of my avatar or the PDN logo. Thank you. Have a nice day.

Link to comment
Share on other sites

maplemushroom.com its a maplestory forum. i paid for the domain name (well actually i made my dad do so) and set all the registrar stuff 0.0 i also made a freewebs site all by myself except for the text effects at freewebs.com/annoyingwebpages (space =)) .

RuneScapeBorn2killxSig.png

I built my first computer at age 11!

Link to comment
Share on other sites

  • 4 weeks later...

mmm Illnab1024 an trickman were yur avatars thnks to this tutorial? or was that form another? =/ if it was from another...could you just send me the link =/ because the button and you sigs are similiar =/

thnks

(i want to do a buttn like your for another forum ^^ or mybe even for this one ^^)

bannercodeah7.png
Link to comment
Share on other sites

mmm Illnab1024 an trickman were yur avatars thnks to this tutorial? or was that form another? =/ if it was from another...could you just send me the link =/ because the button and you sigs are similiar =/

thnks

(i want to do a buttn like your for another forum ^^ or mybe even for this one ^^)

My av was done without looking at noone's tut! I created it without looking at other ppls pics... but if you want i can tell you how I made my av :D

sig6rj3.png
Link to comment
Share on other sites

yeah yeah yeah! i want it =D its just because of the circles you used....mines stay....at least.....strange -.- so...post a tutorial bout it! thnks!

bannercodeah7.png
Link to comment
Share on other sites

  • 3 weeks later...
hey, EXReaction, how did your sig change everytime I refresh the page?

I assume the location of his sig (http://www.lithiumstudios.org) has javascript that changes the image displayed.

nah, he got subfolder called "userbars.gif" containing an index.php outputting random userbars.

edit@the post below: lol

Link to comment
Share on other sites

hey, EXReaction, how did your sig change everytime I refresh the page?

I assume the location of his sig (http://www.lithiumstudios.org) has javascript that changes the image displayed.

nah, he got subfolder called "userbars.gif" containing an index.php outputting random userbars.

edit@the post below: lol

Exactly. :)

userbars.gif
Link to comment
Share on other sites

  • 4 weeks later...
  • 1 month later...

Great tutorial--one of the best I have seen on the subject.

In my button, I added to minor tweaks to help sell the 'glass' effect:

(1) I moved the white overlay down and to the left 3 pixels in each direction. That leaves a dark blue border across the top of the button to represent its top side.

(2) If you look closely at the Microsoft glass buttons, you can see a white highlight running along the top of the button. To reproduce this highlight, I drew a white outline rounded rectangle, the same size as the button rectangle, on a separate layer. I cut the rectangle at its left edge, just before it begins to curve down, and at its top right edge, just after it finishes its curve downward. That leaves a straight line at the top of the button with a curve on its right side.

I moved this line down and to the left three pixels, so it sits over the edge of the white overlay. Now all I need to do is fade the highlight in from the left, and fade it out as it rounds the curve on the right.

To do that, I selected the line from its left edge to about three quarters of the way to its right side. Then, using the gradient plug-in for Paint.NET, I created a gradient from 100% transparent to 100% white and applied it to the line. That makes the highlight fade in from the left. I did the same thing to fade the highlight out as it rounds the curve on its right side. The result is a button that is nearly a dead ringer for the Microsoft button.

Thanks again for the great tutorial! I've wanted to do glass buttons for ages, but could never find a good recipe.

Link to comment
Share on other sites

  • 3 months later...

For IE 7.0 goto Page menu and select View Source. You'll see the code. Save it as button.html and you could open it in IE...

That's not all the stuff, but a start!

I wrote the code for the button myself;

what i meant was that i cant figure out how to make HTML code work in the forums instead of BBCode

sig.png
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...