css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

I made this demo to try out and illustrate some of the subtle button effects you can create just using box-shadow and borders on pseudo–elements.

Inspired by the work I saw a while back over on Beemuse (http://beemuse.com/paper) and so this is a heavily tweaked more dynamic version of those effects.

Also see Nicolas Gallaghers previous post on effects like this: http://nicolasgallagher.com/css-drop-shadows-without-images/

Tested in latest Chrome and Firefox, but no reason it shouldn't work in all latest browsers.

Comments

  1. pure awesomenesssss!!!!

  2. Really nice! :)

  3. great, you should make mixins for each of them

  4. awsome! very good job, good examples!!! i pick up it :) last version best)

  5. These are great!

  6. The shadows are so realistic and the animations are wonderful!

  7. Hey Ashley, these are great examples but I'm have some issues when I copy it to my machine to make adjustments. I was trying to fine some more info on the "&" symbol that you are using in the CSS. None of the animation or shadows work if they are running on my machine. Do you have any thoughts on what might be going on? Thanks Mark

  8. Hi Mark,

    I’m using Sass – a CSS preprocessor, which uses the & symbol for referencing parent selectors (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector).

    If you are using pure CSS, maybe use the developer tools to see the compiled css and copy the rules from there, as that should give you the CSS rather than the Sass.

  9. Thank you Ashley, that helped, I thought I had turned of the SASS option but I guess I didn't, I'm a little new to this site.

    Thanks again

  10. These are lovely. To help with affordance, is it possible to have one which is fully raised, and which on mouse hover leaves the centre raised, and turns down both the ends to show that it has noticed the hover. This leaves it visibly obvious that a down-press is still possible..

    Another option is that it is raised along its full length by default, and fully raised and glowing in hover. Then flat and glowing once pressed.

    Glowing = active, raised/flattened = still to be pressed/ has been pressed.

    Thanks for the inspiration, I'll no doubt start to play with this when I have a minute. (I do have a massive requirement for graceful degradation for older browsers, but the buttons I currently have at http://bit.ly/clubknight-demo2 work on every device I have tried, so I can just use them as my failback. The issue with them is they don't really look like buttons.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...