homepage Welcome to WebmasterWorld Guest from 107.21.135.68
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Are CSS "Push Button" Effects Practical?
DXL




msg:4560596
 1:21 pm on Apr 2, 2013 (gmt 0)

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




msg:4560722
 7:22 pm on Apr 2, 2013 (gmt 0)

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




msg:4560788
 10:51 pm on Apr 2, 2013 (gmt 0)

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




msg:4562387
 4:43 pm on Apr 7, 2013 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved