Archive for the ‘button’ Category

A Bit on Buttons

Posted on: No Comments
1 The other day we published an article with a bonafide CSS trick where an element with a double border could look like a pause icon, and morph nicely into a CSS triangle looking like a play icon. It was originally published with a <div> being th...

Distorted Button Effects with SVG Filters

View demo Download source Following our latest web experiment by Lucas Bebber where we created realistic heat and water distortion on images and text, we’d like to share some inspiration for these kind of effects on buttons. Applying SVG f...

Buttons in Design Systems

I really like this post by Nathan Curtis where he discusses how buttons can be applied to a design system: I love buttons. I can do things with buttons. Take a next step. Make a commitment. Get things done. With buttons, interaction springs to life. T...

Shazam-Like Morphing Button Effect

Posted on: No Comments
View demo Download source Today we’d like to show you how to create a fun little morphing button effect. In this tutorial we’ll create a Shazam-like UI where we initially have a simple button that, when clicked, morphs into a listening but...

Animating an SVG Menu Icon with Segment

Posted on: No Comments
View demo Download source Today we are very happy to share an interesting menu icon effect with you. The idea is based on the Dribbble shot hamburger menu by Tamas Kojo. At first, the icon is the classic burger menu icon. But when you click on it, it ...

Elastic Progress

Posted on: No Comments
View demo Download source Today we’d like to share an interesting progress button effect with you. The effect is based on a very nice Dribbble shot called “Download” by xjw. The button starts as an icon with an arrow and once it̵...

Styling & Customizing File Inputs the Smart Way

Posted on: No Comments
View demo Download source There are quite a few techniques for “customizing” the <input type="file" /> element. I tried most of them, but none was good enough to have on Readerrr (for importing feeds by uploading a file). Probably the worst ...

Creating Material Design Ripple Effects with SVG

Posted on: No Comments
View demo Download source With the advent of Google’s Material Design came a visual language that set out to create a unified experience across platforms and devices. Google’s examples depicted through their Animation section of the Materi...

Inspiration for Button Styles and Effects

Posted on: No Comments
View demo Download source Today we’d like to share some fresh button styles and effects with you. The current “button trend” is quite exciting since there are a variety of design details in use which allow for a great diversity of st...