Comments on: Liquid & Color Adjustable CSS Buttons

By: Deafboy91

Deafboy91 — Tue, 09 Mar 2010 22:42:43 +0000

Hi, how to set buttons on center align?
Thank

By: Michael

Michael — Sat, 30 Jan 2010 23:46:09 +0000

I found a good explanation and downloadable example of how to make a liquid anchor button at http://www.combsconsulting.com/liquid-anchor-button/index.html.

By: random

random — Sat, 23 Jan 2010 20:40:14 +0000

Just use CSS3, why care about users with old browsers.

These buttons fallback nicely.

By: KKStudios

KKStudios — Thu, 21 Jan 2010 15:08:25 +0000

@ Taitems

If it weren't added more then 3 sprites, it could have not been "stretched" (there are script methods that actually can do this), so the easiest way to make a stretched button, we need to add more sprites then a base sprite.
Or else large button text's wouldn't fit into the button without coming outside.

_____________________________________________________
Greetings KK = D (Please reply to this By my e-mail)

By: KKStudios

KKStudios — Thu, 21 Jan 2010 14:53:55 +0000

ADD TO THE LAST POST:

You can replace/add :active , :visited :link or :hover (used) for other details to the button.

_____________________________________________________
Greetings KK = D (Please reply to this By my e-mail)

By: KKStudios

KKStudios — Thu, 21 Jan 2010 14:48:16 +0000

Nice button script.

I edited it in a cool way that you “possibly” could add to this tut’,
it is a hover method. It isn’t hard to add, but not many people understand
how to do it.

Between the “style” tags, you can add:

.btn:hover{
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;
}

So when someone hovers the button, the button will change the transparency (in other names alpha & opacity) to whatever they want to.

B.T.W.
Hope this was a usefull method for adding hover WITHOUT making more images for the script.

Note!
All the “content (text)” in the button will also become “lighter”.

_____________________________________________________

Greetings KK = D (Please reply to this By my e-mail)

By: Taitems

Taitems — Mon, 18 Jan 2010 23:11:13 +0000

I can see two issues immediately:

- You cannot click the button edges

- You use 3 separate images when a single sprite would have worked just as well

What I have learnt from spriting my images is that often, three 5kb images will often combine into a single 5kb image. This results in a third of a the file size and also saves two requests.

By: Jeremy

Jeremy — Sat, 16 Jan 2010 16:18:31 +0000

Nice buttons, thanks for the tutorial!

By: Ferdy

Ferdy — Fri, 15 Jan 2010 12:36:54 +0000

I absolutely love the styling of these buttons and how it looks nice also in IE. However, using this in an application does bring a few problems:

- Since this is not a real button, you have to use javascript to submit a form. What if the user has javascript disabled?

- Since this is not a real button, hitting [ENTER] in a field will not submit a form.

All in all it does bring a few accessibility issues. That’s unfortunate because I love the look. I wish I could get this kind of style on real button elements, but I know from experience that IE spoils it.

Any thoughts from you or the other commenters on how to get this style, yet still get proper form behavior without resorting to hacks?

By: Nick

Nick — Wed, 13 Jan 2010 06:25:33 +0000

http://chikuyonok.ru/2009/03/photoshop-for-webdevs-2/ — see code. Very interesting solution.