Animated-material-floatbutton

A floating round material button that has animations between states.

Screenshot animation

!Animation

Demo

Click here

States

Currently the following icons/states are supported:
* equals
* check
* min
* cross
* close
* hamburger
* search
* stop
* play
* pause
* arrow-down
* arrow-right
* arrow-left
* arrow-up

Usage

Either download/clone this repo or install it with yarn/npm or bower:

yarn add animated-material-floatbutton

npm i animated-material-floatbutton -S

bower install animated-material-floatbutton

Simply use the following snippet:

``html

`

For a example check the example dir.

Change the class equals` to any class you want to use (see States)

Ripple

This lib plays pretty nice with a ripple effect library I made. Which is available here
See the example dir for a example on how to combine these.

Issues

* Play and pause button are a bit funky. Need to find a way to display them without border attributes.
* Changing the scale in Chrome first changes the icon-container (blue circle) and the icon after that.