Material Design: Expanding Circle – Talking HTML
Listen now
Description
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-size:cover;
}
.circle3
{
background: #3b5998;
z-index: 2;
background-size:cover;
}
.circle4
{
background: #dd4b39;
z-index: 1;
background-size:cover;
}
.container_circle:hover .circle2
{
bottom:75px;
}
.container_circle:hover .circle3
{
bottom:140px;
}
.container_circle:hover .circle4
{
bottom:205px;
}
More Episodes
Published 06/27/22
Published 02/20/21
Published 02/20/21
Links
Twitter
Facebook
Instagram
Patreon
Genres
Artwork or description wrong?
Request an update »
Updates may take a few minutes.
Do you host a podcast?
Track your ranks and reviews from Spotify, Apple Podcasts and more.
See hourly chart positions and more than 30 days of history.
Get Chartable Analytics »
See hourly chart positions and more than 30 days of history.
