A very basic tutorial on how to build a Material Design expanding circle as seen on Google products. Smashing Magazine Transition article Material Design Instructions https://design.google.com/ HTML –> +

t

f

g+

CSS .circle { width:60px; height:60px; box-shadow: 3px 3px 6px #333333; border-radius:50%; position: fixed; bottom: 10px; right: 10px; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -ms-transition:all 0.2s linear; transition:all 0.2s linear; } .circle p { margin: 0; padding: 0; font-size: 40px; font-weight: bold; } .circle1 { background-color:#db4531; z-index: 4; } .circle2…

The post Material Design: Expanding Circle – Talking HTML appeared first on Schaffen Creative.