Ideas for CSS Button Hover Animations
In Playground, by Manoela Ilic
Some inspiration for button hover animations using CSS only.
button
Magnetic Buttons
In Playground, by Manoela Ilic
A small set of magnetic buttons with some fun hover animations.
Ideas for Proximity Feedback with Progressive Hover Effects
In Playground, by Manoela Ilic
We’re exploring a progressive hover effect which triggers not just when we are hovering an element but progressively, when we come close to it.
Particle Effects for Buttons
In Playground, by Luis Goncalves
A little library that can be used for bursting particles effects. The idea is to disintegrate an element into particles and make it disappear (or vice versa).
Distorted Button Effects with SVG Filters
In Playground, by Adrien Denat
A set of inspirational, highly experimental distortion effects for buttons using SVG filters.
Shazam-Like Morphing Button Effect
In Tutorials, by Manoela Ilic
A tutorial on how to create a Shazam-like button that morphs into a music player using Snap.svg.
Animating an SVG Menu Icon with Segment
In Tutorials, by Luis Goncalves
A tutorial on how to implement an animated menu icon based on the Dribbble shot by Tamas Kojo using SVG and Segment, a JavaScript library for drawing and animating SVG paths.
Elastic Progress
In Playground, by Lucas Bebber
An elastic SVG progress loader based on the Dribbble shot “Download” by xjw and implemented with SVG and TweenMax.
Styling & Customizing File Inputs the Smart Way
In Tutorials, by Osvaldas Valutis
A tutorial on how to style and customize <input type=”file”> in a semantic, accessible way using the <label> element and some JavaScript.
Creating Material Design Ripple Effects with SVG
In Tutorials, by Dennis Gaebel
An in-depth tutorial on how to build the ripple effect outlined under Google Material Design’s Radial Action specification and combine it with the powers of SVG and GreenSock.
Inspiration for Button Styles and Effects
In Playground, by Manoela Ilic
A collection of fresh button styles and effects for your inspiration. We use CSS transitions and pseudo-elements for most of the effects.
Subtle Click Feedback Effects
In Playground, by Manoela Ilic
A set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases. The effects are done with CSS animations mostly on pseudo-elements.
Some Ideas for Checkout Effects
In Playground, by Manoela Ilic
Some fun effect and layout ideas for the first step of a checkout process in an online store. We are using the morphing buttons concept together with CSS transforms and transitions.
Elastic SVG Elements
In Playground, by Manoela Ilic
Some inspiration for elastic components with SVG shape animations for enhanced UI interactions.
Morphing Buttons Concept
In Playground, by Manoela Ilic
Some inspiration for a morphing button concept where the action element (button) morphs into a component. The examples show different types of components, i.e. fullscreen overlay, modal window, sidebar and more.
How to Create a Circular Progress Button
In Tutorials, by Manoela Ilic
A tutorial on how to implement the circular progress button concept by Colin Garven. We are using the SVG line drawing animation technique as described by Jake Archibald to animate the circular progress and provide a success and error state to indicate the final status.
Progress Button Styles
In Playground, by Manoela Ilic
A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.
Creative Button Styles
In Playground, by Manoela Ilic
Some creative and modern button styles and effects for your inspiration.
