Button Text - How do i change the text on this button? Options

[michaelhofby]

Hey guys!!

So i got a question about a button i need to have on a website .

I want the button to say Yes, I Want In! And then just under that primary text it should say It´s 100% Free..

Please can some of you designers help with this ? thanks in advance


I have attached the picture of the button, i dont have the PSD of it

[Frederiek]

Then, you'll have to create a new button in Photoshop.

Or, create a similar gradient with CSS3. You can do that at http://www.colorzilla.com/gradient-editor/. Create the box-shadow at http://css3generator.com . And grab the CSS from both.

[michaelhofby]

Then, you'll have to create a new button in Photoshop.

Or, create a similar gradient with CSS3. You can do that at http://www.colorzilla.com/gradient-editor/. Create the box-shadow at http://css3generator.com . And grab the CSS from both.

Hey man i have no idea how to do that hehehe and i dont have photoshop either . It sucks .

Can you do it for me ?

[Frederiek]

Sorry, I don't do such things and I don't have time for that.
But, there are free alternatives for photoshop. See http://www.hongkiat.com/blog/11-free-alter...dobe-photoshop/ .

Or try CSS3. It's really cool. Besides, easier to change if you'd wish.

[pandy]

You don't need Photoshop. Any image editor of that kind will do, PaintShop or whatever. Google your editor and gradient and you'll find instructions.

[Darin McGrew]

The Gimp is free and is available for whatever platform you're using.

[Christian J]

There's a bevel in the bottom right corner that might be hard to recreate with CSS.

Personally I'd consider creating a new blank mid section by repeating a narrow slice from the side. This can be done even with CSS2.

[Frederiek]

Apparently, there is a way to code such a button with CSS3.
Today, I found this in my newsreader: http://designmodo.com/3d-css3-button/

[pandy]

It looks like the demo button sinks down slowly when it's clicked. Must be the size of it that tricks the eye. Do you see that too?

[Christian J]

The slowness is intentional, see section "Adding Animation" in the linked page.

[Christian J]

..and of course the spec: http://www.w3.org/TR/css3-transitions/ (note that it's still a working draft).

CSS3 is making things too easy! Without any challenge I fear creativity will suffer (at least mine). Or we'll have to invent things that challenge even CSS3.

[pandy]

Oh. I didn't think that worked in any browser yet.

Easy and easy. I think they take it to far. Wasn't behavior supposed to be reserved for JavaScript? Of course it depends on how you define behavior.

[Frederiek]

I've seen very clever demos done in CSS3. People like Designmodo and especially Codrops take the challenge and experiment with all kind of things CSS3 (sometimes coupled with jQuery).

I'm not very familiar with transitions, animations and keyframes yet. But aren't we glad CSS took over the javascript swaps we did before? Now, it takes over even more. Surely there's always some jQuery plugin to do the same.

[Christian J]

But aren't we glad CSS took over the javascript swaps we did before?

Absolutely. I once made a transition script in JS. It was both tricky and possibly slowed down some browsers as well.

You could also make transitions with W3C's SMIL, but AFAIK nobody but MSIE supported it.

Surely there's always some jQuery plugin to do the same.

[Frederiek]

Surely there's always some jQuery plugin to do the same.

Absolutely agreed!

[pandy]

Transition? You mean when one page fades into another? Surely the big problem with that is that no one but the creator wants to see it?

[Christian J]

You lack faith in my esthetic abilities (and here I thought my choice of avatar spoke for itself).

I used the script to make gradual changes between numerical CSS property values (e.g. opacity), just like the button example in this thread. When used subtly such transitions can make the user experience a little bit smoother (as opposed to the on/off abruptness of ordinary CSS).

[pandy]

Oooh, subtle!