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

Simulating squishy rubber (elastomer) buttons, inspired by designs on Dribbble

Comments

  1. I could press them all day - it's like playing with bubble-wrap! Yummy!

  2. They almost cry out for a squishy sound effect...

  3. So awesome mate! Love these!

  4. Spectacular.

  5. In the continuing debate between 'flat' and 'real' looking design on the web, I'd say this is a W in the 'real' column.

  6. Amazing! Can imagine how they would feel in real life perfectly.

  7. How the hell do you guys figure out how to master CSS gradients like this?

  8. Ridiculous! It looks like the blur filter is key here.

  9. Awesome, want to touch it so much!

  10. Evil! I couldn't stop clicking them!

  11. I just want to poke them through my screen! Fantastic creation!

  12. Amazing! perfect!

  13. Crazyyyy buttons :P

  14. I am just clicking and clicking :D awesome!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  15. IT FEELS SO GOOD!!!

  16. Lovely buttons. :)

  17. Great animation. I always struggle with finding the right balance when doing click -> dark to light (but still darker than before click)

  18. Looks really awesome! The gradients on these are just amazing and the buttons just look so real and rubbery. I do have one little nitpick. The bottom edge of the plus does not move at all - I would expect it to go a bit up when the button is pressed and it scales down - and so it breaks the illusion a bit.

  19. Wow, they look so real you wanna bite them.. :)

  20. that's awesome

  21. holy hell that is nice

  22. Great work. Very realistic! But honestly, how long time did you spend until you were satisfied with the transition?

  23. Good grief that's ridiculously cool.

  24. Really nice work_○°

  25. Dude, this is AWESOME

  26. Joined the party late on this one, but these are amazing man

  27. Looks like I'm getting here late too but these are just too cool! I could keep clicking all day!

  28. Genius! Im just starting to code, stuff like this gets me super exited. How could I change the circle into a square?

  29. Awesome stuff! blurring everything 1px really does add to the 3D-render look & feel. and I thought I had gone overboard with box-shadows on this one http://codepen.io/drewendly/pen/BzwbQX

  30. Very beautiful ;)

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

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