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

{

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.