<button class="btn" type="button">
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__p"></span>
<span class="btn__text">!</span>
</button>
<svg class="effects" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="fire">
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="fire" />
<feBlend in="SourceGraphic" in2="fire" />
</filter>
</defs>
</svg>
@import "compass/css3"
@function randomNumber($min,$max)
@return (random(100) / 100) * ($max - $min) + $min
*
border: 0
box-sizing: border-box
margin: 0
padding: 0
\:root
--bg: #{hsl(223,10%,90%)}
--fg: #{hsl(223,10%,10%)}
font-size: calc(30px + (60 - 30) * (100vw - 320px) / (1280 - 320))
body, button
font: 1em/1.5 -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, sans-serif
body
background: var(--bg)
color: var(--fg)
height: 100vh
display: grid
place-items: center
.btn__text,
.effects
position: absolute
top: 0
left: 0
$particles: 20
$particleSize: 0.5em
.btn
$particleDelays: ()
$filterID: "#fire"
border-radius: 1.25em
color: hsl(0,0%,100%)
font-weight: bold
-webkit-filter: url($filterID)
filter: url($filterID)
position: relative
width: 2.5em
height: 2.5em
transition: transform 0.1s linear
-webkit-apperance: none
apperance: none
&__p,
&__text
background: hsl(3,90%,55%)
border-radius: 50%
transition: background 0.15s linear
&__p
animation:
duration: 1s
timing-function: linear
iteration-count: infinite
pointer-events: none
position: absolute
width: $particleSize
height: $particleSize
@for $p from 1 through $particles
$newDelay: 0s + randomNumber(-1,0)
$particleDelays: append($particleDelays,$newDelay)
&:nth-child(#{$p})
animation-name: rise#{$p}
animation-delay: $newDelay
top: calc(50% - #{($particleSize / 2) + (0.9 * sin(($p / $particles) * pi()))})
left: 2em * ($p / $particles)
&__text
display: block
padding: 0.5em
width: 100%
height: 100%
z-index: 1
&:active
transform: translateY(0.1em)
&:focus &__p,
&:focus &__text,
&:hover &__p,
&:hover &__text
background: hsl(18,90%,55%)
&:focus &__p,
&:hover &__p
animation-duration: 0.5s
@for $d from 1 through length($particleDelays)
&:nth-child(#{$d})
animation-delay: nth($particleDelays,$d) / 2
/* Dark theme */
@media (prefers-color-scheme: dark)
\:root
--bg: #{hsl(223,10%,10%)}
--fg: #{hsl(223,10%,90%)}
/* Animations */
@for $k from 1 through $particles
$startX: 0em
$midX: $startX + randomNumber(-0.1,0.1)
$endX: $startX + randomNumber(-0.25,0.25)
$endY: 1em * randomNumber(-3,-1)
$midY: $endY / 2
@keyframes rise#{$k}
from
transform: translate($startX,0) scale(1)
50%
transform: translate($midX,$midY) scale(1)
to
transform: translate($endX,$endY) scale(0)
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.