Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Creating Buttons that Appear Raised in CSS

Creating Buttons that Appear Raised in CSS

Problem

I'm converting an image based button into a CSS only button for an application that I'm working on. Here's an example of the current image:

Enlarged Size:

Base Size:

And here's where I'm at so far: http://dabblet.com/gist/3098607

What I'm having trouble replicating is the fact that the button has a shadow that makes it appear Raised up a little. I've had no luck trying to replicate this with box-shadow.

Anybody have any ideas how I can get replicate this effect? Any help would be appreciated.

Thanks.

Problem courtesy of: TJ VanToll

Solution

Try to use http://css3ps.com/ — this service can try to mimic your photoshop layer style. Also there is alternative PS plugin http://csshat.com/ (but not free), that helped me alot.

UPDATE:

Created JSFiddle, trying to implement you button in CSS3. Please, write some feedback — are these the droids you're looking for?

Maybe shadow must be displaced to the left by 1px, but that's not the point.

UPDATE 2:

Or, maybe (I am repeatedly rereading question trying to figure out necessary behaviour), you'll like this: click.

           

Solution courtesy of: fedosov

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Creating Buttons that Appear Raised in CSS

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×