The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

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:

    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

    This reply has been reported for inappropriate content.

    @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

    This reply has been reported for inappropriate content.

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

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed