Grow your CSS skills. Land your dream job.

CSS buttons using box-reflect

  • # June 23, 2011 at 7:16 am

    Saw this post on Forrst (must be a member to view) and it inspired me to create this using CSS.

    Any improvements you can think of?

    # June 23, 2011 at 9:09 am

    Looks like you demo is over here: http://jsfiddle.net/sl1dr/zr5a4/

    It looks really good – don’t see how you could improve them. Nice work.

    # June 23, 2011 at 9:14 am

    I can’t see the thing on Forrst. Trying to get on but it’s a mission. The JSFiddle thing looks good though. I dislike it’s misty look though, I’d ditch an inner shadow like that.

    # June 23, 2011 at 9:31 am

    @Roxon Thanks for linking that, I have fixed my original post now.

    @Brightonmike I have tried to replicate the original as much as possible, but your feedback is noted!

    # June 23, 2011 at 12:58 pm

    wait so it only works in chrome?

    # June 23, 2011 at 1:05 pm

    Or Safari, presumably.

    @furrball1383 – that’s what the -webkit- prefix in the CSS means.

    # June 23, 2011 at 1:09 pm

    ahh thanks!

    # June 23, 2011 at 9:24 pm

    @TheDoc Just Chrome at this stage.

    # June 23, 2011 at 10:56 pm

    I like it, however I do agree with the misty-ness of it. However, the rollover actually makes the reflection come out a bit too, so i love that aspect of it.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".