Home/ Questions/Q 8214577
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T11:30:23+00:00

I’m converting an image based button into a CSS only button for an application

  • 0

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:

Enlarged Image

Base 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

               Example

    • 0