Material Design: Expanding Circle – Talking HTML

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 <div class=”container_circle”> <div class=”circle circle1″> <!– <img src=”YOUR-URL-IMAGE.png”> –> <p>+</p> </div> <div class=”circle circle2″><p><a href=””>t</a></p></div> <div class=”circle circle3″><p><a href=””>f</a></p></div> <div class=”circle circle4″><p><a href=””>g+</a></p></div> </div> 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 { background: #00aced; z-index: 3; <!– background-image: url(YOUR-URL-IMAGE.png); –> background-size:cover; } .circle3 { background: #3b5998; z-index: 2; <!– background-image: url(YOUR-URL-IMAGE.png); –> background-size:cover; } .circle4 { background: #dd4b39; z-index: 1; <!– background-image: url(YOUR-URL-IMAGE.png); –> background-size:cover; } .container_circle:hover .circle2 { bottom:75px; } .container_circle:hover .circle3 { bottom:140px; } .container_circle:hover .circle4 { bottom:205px; }   The post Material Design: Expanding Circle – Talking HTML appeared first on Schaffen Creative.