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;
}

Podcast: Play in new window | Download (Duration: 18:15 — 16.7MB)

Subscribe: Apple Podcasts | Android | Email | RSS