Yet another morphing material design button. Just a test...
A Pen by Elton Mesquita on CodePen.
main | |
.nav-icon | |
.line | |
.line | |
.line |
Yet another morphing material design button. Just a test...
A Pen by Elton Mesquita on CodePen.
*, *:before, *:after { | |
box-sizing: border-box; | |
} | |
main { | |
width: 100%; | |
height: 100vh; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
background: rgb(250,250,250); | |
transform-style: preserve-3d; | |
perspective: 400px; | |
} | |
main:hover { | |
.lines, | |
.nav-icon, | |
.nav-icon:after { | |
will-change: transform; | |
} | |
} | |
.line { | |
width: 40px; | |
height: 7px; | |
margin: auto; | |
background: #fff; | |
border-radius: 4px; | |
transform-orign: 100% 100%; | |
transition: all .4s ease; | |
} | |
.nav-icon { | |
width: 80px; | |
height: 80px; | |
padding: 22px 0; | |
position: relative; | |
display: flex; | |
flex-direction: column; | |
background: #29abe2; | |
border-radius: 100px; | |
perspective: 400px; | |
transition: all .6s ease; | |
&:after { | |
content: ""; | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
top: 0; | |
left: 0; | |
border-radius: 100px; | |
box-shadow: 0 0 6px rgba(50,50,50,.85); | |
transition: all .6s ease; | |
} | |
} | |
// [1] It should be translateZ(80px), but | |
// it gets uglyly pixelated, unfortunately | |
////////////////////////////////////////////// | |
.nav-icon:hover { | |
transform: scale(1.3); // [1] | |
&:after { | |
box-shadow: 0 6px 24px rgba(50,50,50,.45); | |
} | |
.line { | |
transform: rotate3d(0,0,1,45deg); | |
&:nth-child(2) { | |
opacity: 0; | |
transform: translate3d(-100%,0,0); | |
} | |
&:nth-child(3) { | |
transform: rotate3d(0,0,1,-45deg); | |
} | |
} | |
} |