Glass, black buttons for black background?

Hi all,

I’ve been trying to create shiny (or glassy) looking black buttons for a black background. I’m not really into the whole “Web 2.0” trend, but I believe these will have much more aesthetic appeal than the buttons I currently have. The problem is, the background of the page is black as well and the images don’t look so great on the page.

I’m currently using GIMP because I don’t have my PS software, and while GIMP is great, I’m lost on how to create the effects I’m looking for in this software. I’ve created some great looking buttons, but I just can’t seem to make them look right with the black background.

Does anyone know how to do this particularly in GIMP or know where I can find some open source Web 2.0 buttons that will do the trick? I’ve searched all over the next and found some tuts for GIMP but the effects still don’t come out looking right. What I’m trying to accomplish is create a shiny black button with a sheen and nothing more.

I’ve attached one of the buttons I’m talking about. The black in it gives the appearance it has an odd shape when placed on a black background because the gradient is going black to light, top to bottom. But when reversed, it merely changes the direction of the odd shape.

Also, the button attached is freely able to be used if any of you like it’s appearance :slight_smile:

Thanks for the help!

P.S: The image uploader on this site is broken I think. It doesn’t properly upload / attach images unless I use the basic uploader. The other two options always gives me an error.

ALL CSS SOLUTION ( tweak colors, and gradient positions and add vendor prefix as necessary):


.button{ 
color:#fff;
background: -webkit-linear-gradient(top, #aaa 0,#000 60%, #555 100%);
-webkit-box-shadow: inset 0 -1em 0 .2em rgba(0,0,0,.55);
border: 1px solid #000;
-webkit-border-radius:1em;
padding:.67em;

}

for 100% cross browser , you can take a screen shot of the button created by this CSS, and then tweak in GIMP.

Hope that helps

Hi dresden_phoenix

Thanks for the help and while that does look good (and is an awesome implementation of CSS to create image-less buttons), it unfortunately does not fit with the rest of the page. Even tweaking in GIMP doesn’t create the glassy button with a high sheen effect. What I need is an actual Web 2.0 button (either more square than the one I posted, or roughly the same size and shape) for the navigational bar.

Off Topic:

What on earth is a Web 2.0 button? I’ve never heard of it before. :o

Hi TechnoBear,

It’s what they call those glossy, or shiny looking buttons that have a smooth, sheen look.

Here’s a link so you can take a gander at a tutorial on how to make them. If you scroll down, you’ll see a few “demos” of a Web 2.0 button.

http://iris-design.info/photoshop/web-20-style-buttons/

Anyways, I figured it out on GIMP (the tutorial I posted wasn’t used). It was a bit tricky, but I got it to work after messing with a few settings and whatnot.

Thanks for the help!

Thank you. I’m still not sure I really know what Web 2.0 means - but at least now I know how to make shiny buttons. :slight_smile: Now I’m just wondering where I can use them…

Anywhere you like, you’re the designer ;).

As for the Web 2.0 term, it’s simply a technical term that was used to define “a new and improved internet”. Basically, it was slang that caught on and a trend bandwagon that a lot - and I mean a lot of designers jumped onto because it was “innovative and cool” and pretty soon instead of the 90’s heavily animated websites, we have high-glossy webpages, hard-to-read text, eye-popping 3D effects and Flash animations that give people headaches lol. Don’t get me wrong, there are some really nice looking websites out there using the “Web 2.0” concept, but they’re done properly.

In my opinion, it’s much like the fashion world. Certain people tote about certain fashions and everyone flocks to it like it’s the end all and be all of the fashion world and before you know it, everyone looks the same. That’s what Web 2.0 is.

@netgrubber - thank you for the enlightenment. :slight_smile: I’m now reassured that I’m not missing anything important. (: I like usability/accessibility in my sites, so most of that stuff I’m just not interested in. (I understand your point that it can be done well.)

As to where I can use the shiny buttons, that was really a question to myself. I can’t think of a site of mine that they’d fit in with at the moment. I wonder if my husband would like a makeover for one of his…? :lol:

Lol, that’s too funny and if he doesn’t want it, you just reply “Oh, suck it up princess, you’re getting a makeover!” :smiley:

If you don’t want to do it w/ CSS3 (b/c of the lack of support), you can do it with a simple gradient.

I don’t know how it works in GIMP, but I imagine that they would have a feature similar to Photoshop. In Photoshop, I’d just create more “color stops” (which is…exactly what D_P was doing in his post, just w/ CSS) in the respective colors that you want. Questions?

Off Topic:

@TechnoBear; are you being facetious? I feel as if you know what the “Web 2.0” trend is. :lol:

~TehYoyo

[ot]

No, not in the slightest. I’ve heard the phrase bandied about, but different people seem to mean different things by it, and some folk that use it don’t seem to know what they mean by it. :slight_smile: netgrubber’s explanation is the best I’ve come across.[/ot]

Alright :shifty: It’s kind of an abstract thing. (In practice, it seems sort of ugly to me :confused: )

~TehYoyo

“Web 2.0” doesn’t exist, which is why nobody knows what it means. It’s a vacuum buzzword without meaning.

Good grief - in that case I was right all along and didn’t even realise it. :rolleyes: I always felt it had no meaning, but I assumed I was just missing something. Thanks, @kohoutek :lol:

I aim to please. :smiley:

Seriously though, it’s quite frustrating. I can say that in almost every second client correspondence, I get something like, “Can you make that a Web 2.0 design, please?”. When I ask them what they mean by that then…well, the answers and descriptions could fill a lexicon of their own.

So a couple of you just reiterated what I said about Web 2.0 in different wording to share the credit for what I already stated? Lol, just kidding, though I would have to disagree about it not existing because it certainly does exist as a concept and concepts have feelings too lol.

Anyways, in case some didn’t notice, I did figure my OP question out. I just had to mess with GIMP a bit to deliver the effects I was seeking. I ended up with some great looking buttons.

What concept would that be?

In a nutshell, the concept is that of a more fluid, cross-browser compatible, stable web design with high visual appeal (typically this falls into the high-sheen look) and dynamic interactivity (typically in the form of client or server based scripting). Hence the version number of Web. It’s the same exact concept as application development. If I had a version of software that was 1.0, and another was released under 2.0, which version would you think would be more ‘up-to-date’ and stable? Software 2.0 of course.

I’m sorry, but as a professional web designer, I would never look at my potential clients that asked for a “Web 2.0 design” and respond with “What do you mean by that?” with an explanation about how it doesn’t exist simply because one, I would immediately know they’re most likely thinking of the high, glossy / sheen look with cross-browser compatibility and navigational access with a fluid layout and a higher degree of client-based interactivity. At least that’s the generalization they would have in mind. I may not know how they wish to achieve that but that’s why I’d be asking “How would you like that done?” Rather than telling them, “Web 2.0 doesn’t exist…” because it certainly does exist as a concept. Countless articles and books have been written about it and by my saying “it doesn’t exist…” only makes me lose credibility as a professional web designer.

I agree that definition of “what” it is varies as much as there are stones in a river and that it’s simply jargon that created a bandwagon for people to jump onto, but that doesn’t make it any less existent or relevant.

Firstly, you’re comparing a software’s version with a trendy buzzword? I find that logic to be flawed.

Secondly, of course I’ll ask potential clients what EXACTLY they mean because that’s my job. If I start to “assume” what clients mean without being concise, then I’m doing something wrongly. But then again, I might not be a professional designer after all.

Accessibility and usability as well as cross-browser compatibility have absolutely zero to do with Web 2.0.

Web 2.0 de facto doesn’t exist. It’s a marketing term, nothing more.

You say it does exist and that there’s even a concept. That’s fine. I could not disagree more and we’ll leave it at that. :slight_smile:

I mean, you could have anything be a concept. I’m a big fan of Shalton-style web design, myself. I enjoy the crisp, clean feel and the beautiful layout. That coupled with the responsive web design, best coding practices, and quick load times all make it the best web design concept. To me, there’s not comparison.

~TehYoyo