Are CSS "Push Button" Effects Practical?

[DXL]

I have a client that seems dead-set on having CSS push-buttons used in his website. Javascript-based rollover effects seem to not suffice, he wants the button to only change appearance when it is actually clicked on.

I have three questions maybe you can help out with.

1. Most tutorials for this effect involve buttons generated by the coding itself, is there an easy way to use two images (before & active) created in Photoshop?

2. Will the extra coding have any noticeable effect on page load times?

3. Does anyone still actually use a push-button (not mouseover) effect on websites?

[rainborick]

There are several ways to implement push buttons, and none of them should add any significant overhead to load times unless you have a large number of buttons on the page that each require different images. Even then, you can mitigate the overhead by relying on CSS sprites. And if you create the button with pure CSS, there's no overhead to speak of at all.

I can't say that I see this done very often, but there's no argument to avoid them that I know of. If the client wants it, I'd just do it.

[DXL]

Thanks for the response. In this situation, I don't think I can create the buttons with pure CSS, the client seems to like the existing buttons and clickable graphics.

I suppose my main concern is that it's an unnecessary distraction.

[MarkOly]

1. Most tutorials for this effect involve buttons generated by the coding itself, is there an easy way to use two images (before & active) created in Photoshop?

I did this once using css background images. With no action, button-image-1 is displayed. When active (or both active and hover), button-image-2 is displayed.

On a couple simple checkout buttons that are surrounded by white space, I move the image down 1 pixel, and it feels like it's being pressed.

.continue-img:active {
margin:1px auto -1px;
outline:0;
cursor:pointer;
}

I'm considering removing this and just going with static checkout buttons. I tried having the button move on hover. I didn't like that for checkout buttons. But I do like that for site navigation buttons. I think that might be the distinction. Site navigation: mouseover effect. Checkout buttons: push button.