|
$size: 30vmin; |
|
$baseColor: #d8dee8; |
|
$accent: blue; |
|
$ease: cubic-bezier(.33,.45,.3,1); |
|
|
|
@mixin full($unit) { |
|
position: absolute; |
|
top: $unit; |
|
right: $unit; |
|
bottom: $unit; |
|
left: $unit; |
|
} |
|
|
|
@function accent-from($i) { |
|
@return adjust-hue(lighten($accent, 10), -35deg + (2deg * (5 - $i))); |
|
} |
|
|
|
@function accent-to($i) { |
|
@return adjust-hue($accent, 10deg + (4deg * ($i - 1))); |
|
} |
|
|
|
$accentTo: rgba(accent-to(5), .66); |
|
|
|
$baseColor: |
|
if( |
|
lightness($baseColor) > 80, |
|
$baseColor, |
|
lighten($baseColor, 80 - lightness($baseColor)) |
|
); |
|
|
|
body { |
|
position: absolute; |
|
height: 100%; |
|
width: 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
background: $baseColor; |
|
|
|
&:before { |
|
content: ''; |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
background: radial-gradient(150% 150% at 0% 20%, lighten($baseColor, 0) 20%, darken($baseColor, 30)); |
|
} |
|
} |
|
|
|
.button { |
|
appearance: none; |
|
border: none; |
|
outline: none; |
|
padding: 0; |
|
border: 0; |
|
|
|
cursor: pointer; |
|
|
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
position: relative; |
|
|
|
font-size: $size; |
|
width: 1em; |
|
height: 1em; |
|
|
|
opacity: 0; |
|
animation: buttonIn 2s $ease forwards 2s; |
|
|
|
@keyframes buttonIn { |
|
from { |
|
opacity: 0; |
|
transform: scale3d(1.1,1.15,1); |
|
} |
|
to { |
|
opacity: 1; |
|
transform: none; |
|
} |
|
} |
|
|
|
background: none; |
|
|
|
border-radius: 50%; |
|
|
|
&:before, |
|
&:after { |
|
content: ''; |
|
border-radius: inherit; |
|
} |
|
|
|
&:before { |
|
filter: blur(.025em); |
|
@include full(0); |
|
|
|
// $baseColor: red; |
|
background: |
|
radial-gradient(160% 160% at 57.5% 60%, rgba(lighten($baseColor, 6), 0) 30%, lighten($baseColor, 6) 45%), // light top left |
|
radial-gradient(180% 200% at 40% 17.5%, rgba(darken($baseColor, 20), 0) 35%, darken($baseColor,20) 50%), // dark bottom right |
|
radial-gradient(120% 120% at 45% 45%, rgba(darken($baseColor, 10), 0) 42%, rgba(darken($baseColor,20),.75) 50%), // darker small bottom right |
|
; |
|
background-color: darken($baseColor,8.66); |
|
|
|
box-shadow: |
|
inset -.05em -.05em .025em -.025em darken($baseColor,15), |
|
.115em .15em .1em -.033em darken(adjust-hue($baseColor,-2.5deg), 20), // dark close |
|
.15em .2em .25em darken($baseColor, 15), // dark far |
|
.5em .33em .5em .1em darken($baseColor, 15), // dark furthest |
|
-.1em -.1em .05em -.075em lighten($baseColor, 2), // light close |
|
-.2em -.2em .33em -.075em lighten($baseColor, .5), // light far |
|
; |
|
} |
|
|
|
&:after { |
|
@include full(.025em); |
|
background: |
|
radial-gradient(150% 150% at 75% 75%, rgba(darken($baseColor, 30),0) 30%, darken($baseColor, 30)), // dark top left |
|
radial-gradient(150% 150% at -10% -10%, rgba(lighten($baseColor, 3),0) 50%, lighten($baseColor, 3)) // light bottom left |
|
; |
|
background-color: darken($baseColor, 10); |
|
transition: .75s $ease; |
|
transition-delay: .25s; |
|
opacity: 0; |
|
filter: blur(.03em); |
|
transform: scale3d(.925,.94,1); |
|
} |
|
} |
|
|
|
.print { |
|
$size: 40%; |
|
position: relative; |
|
width: $size; |
|
height: 0; |
|
padding-bottom: $size * 1.1122; |
|
display: inline-block; |
|
z-index: 1; |
|
transform: scale3d(1.05, 1.05, 1); |
|
backface-visiblity: hidden; |
|
|
|
color: rgba(accent-from(5), .5); |
|
|
|
svg { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
bottom: 0; |
|
left: 0; |
|
} |
|
|
|
path { |
|
stroke-width: 4; |
|
fill: none; |
|
stroke-linecap: round; |
|
stroke-dasharray: 1; |
|
transition: 2s $ease; |
|
will-change: stroke-dashoffset, stroke, color, opacity; |
|
} |
|
|
|
$glow: lighten($accent, 85 - lightness($accent)); |
|
|
|
&--under { |
|
margin-right: -40%; |
|
mix-blend-mode: lighten; |
|
filter: drop-shadow(0 0 .033em currentColor); |
|
|
|
// opacity: 0; |
|
stroke-dashoffset: .5; |
|
transition: 2s $ease; |
|
animation: printPulse 2s linear infinite 6.25s; |
|
|
|
@keyframes printPulse { |
|
0% { opacity: 1 } |
|
50% { opacity: .33 } |
|
100% { opacity: 1 } |
|
} |
|
|
|
path { |
|
opacity: 0; |
|
animation: printIn 2s $ease forwards 3.2s; |
|
|
|
@keyframes printIn { |
|
from { |
|
opacity: 0; |
|
stroke-dashoffset: .5; |
|
} |
|
to { |
|
opacity: 1; |
|
stroke-dashoffset: 0; |
|
} |
|
} |
|
|
|
@for $i from 1 through 5 { |
|
&:nth-of-type(#{$i}) { |
|
stroke: lighten(accent-from($i), 22.5); |
|
} |
|
} |
|
} |
|
} |
|
|
|
&--over { |
|
filter: |
|
drop-shadow(-0.0075em -0.0075em 0.005em rgba(0, 0, 51, 0.1)) // dark bevel |
|
drop-shadow(0.0075em 0.0075em 0.005em rgba(255, 255, 255,.25)) // light bevel |
|
drop-shadow(0 0 0.04em currentColor) // glow |
|
; |
|
opacity: 0; |
|
transition: |
|
transform 2s $ease, |
|
color 0s .4s, |
|
opacity .5s $ease, |
|
; |
|
|
|
&:after { |
|
content: ''; |
|
position: absolute; |
|
top: -40%; |
|
right: -60%; |
|
bottom: -40%; |
|
left: -60%; |
|
border-radius: 50%; |
|
opacity: 0; |
|
background: |
|
// radial-gradient(32.5% 32.5% at 52.5% 52.5%, rgba(darken($accentTo, 45), .05), rgba(darken($accentTo, 15), 0)), |
|
radial-gradient(32.5% 32.5% at 42.5% 42.5%, rgba(white, .55), rgba(white, 0)), |
|
; |
|
mix-blend-mode: color-dodge; |
|
|
|
transition: opacity .3s $ease; |
|
animation: |
|
glowPulse 3s linear infinite, |
|
glowTwist 3s linear infinite |
|
; |
|
|
|
@keyframes glowPulse { |
|
0% { transform: scale3d(.9,.9,1) } |
|
50% { transform: scale3d(1,1,1) } |
|
100% { transform: scale3d(.9,.9,1) } |
|
} |
|
|
|
@keyframes glowTwist { |
|
0% { rotate: 0deg } |
|
50% { rotate: 180deg } |
|
100% { rotate: 360deg } |
|
} |
|
} |
|
|
|
path { |
|
opacity: 0; |
|
stroke-dashoffset: 1; |
|
transition: |
|
stroke .5s $ease, |
|
opacity 0s .5s, |
|
stroke-dashoffset 0s .5s |
|
; |
|
|
|
|
|
@for $i from 1 through 5 { |
|
&:nth-of-type(#{$i}) { |
|
stroke: accent-from($i); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.button:hover, |
|
.button.test { |
|
|
|
&.test { |
|
animation: none; |
|
opacity: 1; |
|
transform: none; |
|
font-size: 60vmin; |
|
} |
|
|
|
&:after { |
|
opacity: 1; |
|
transform: none; |
|
transition-delay: 0s; |
|
} |
|
|
|
.print { |
|
transform: scale3d(1,1,1) translateZ(0); |
|
|
|
&--over { |
|
color: $accentTo; |
|
opacity: .66; |
|
transition: |
|
1.5s $ease 4.5s, |
|
opacity .25s $ease, |
|
transform 2s $ease, |
|
; |
|
|
|
&:after { |
|
// opacity: 1; |
|
transition: opacity 2s $ease 5.25s; |
|
} |
|
|
|
path { |
|
opacity: 1; |
|
stroke-dashoffset: 0; |
|
|
|
@for $i from 1 through 5 { |
|
&:nth-of-type(#{$i}) { |
|
$delay: .25s + (.1s * $i); |
|
stroke: accent-to($i); |
|
transition: |
|
opacity .25s $ease $delay, |
|
stroke-dashoffset 4s + (.2s * $i) $ease $delay, |
|
stroke 1s + (.2s * $i) $ease 1.75s + (.1s * (5 - $i)) + 2.5, |
|
color 1s + (.2s * $i) $ease 1.75s + (.1s * (5 - $i)) + 2.5 |
|
; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |