Help - Search - Members - Calendar
Full Version: Button Text - How do i change the text on this button?
HTMLHelp Forums > Web Authoring > Graphics, Flash and Multimedia
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 biggrin.gif


I have attached the picture of the button, i dont have the PSD of it sad.gif
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
QUOTE(Frederiek @ Nov 25 2012, 10:59 AM) *

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 smile.gif i have no idea how to do that hehehe and i dont have photoshop either . It sucks .

Can you do it for me ? biggrin.gif
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). sad.gif Or we'll have to invent things that challenge even CSS3. cool.gif
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
QUOTE(Frederiek @ Dec 14 2012, 09:24 AM) *

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.

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

wacko.gif

Frederiek
QUOTE(Christian J @ Dec 14 2012, 03:55 PM) *

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

wacko.gif

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? tongue.gif
Christian J
You lack faith in my esthetic abilities (and here I thought my choice of avatar spoke for itself). smile.gif

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! biggrin.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.