CSS Fizzy Button

css-fizzy-button.markdown

CSS Fizzy Button

Yeah i like buttons me...

A Pen by Jürgen Leister on CodePen.

License.

index.haml

.button
    %h1 Fizzy CSS Button
    %h2 With super fizzy particle action
    %a{:href => 'https://www.codepen.io/jcoulterdesign'}
        %i.ion-social-codepen
        %span More Codepen shenanigans
    %input#button{:type => 'checkbox'}
    %label{:for => 'button'}
        .button_inner.q
            %i.l.ion-log-in
            %span.t Downloads
            %span 
                %i.tick.ion-checkmark-round
            .b_l_quad
                -(1..52).each do
                    .button_spots
    
    

style.scss

@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,300,700,500,400italic,500italic,700italic,300italic);

body{
    background: #2C3940;
    overflow:hidden;
    font-family: 'Fira Sans', sans-serif;
    a{
        color:white;
        padding-top:20px;
        font-size:10px;
        opacity:0.6;
        position:relative;
        top:10px;
        transition:all .3s;
        font-weight:100;
        text-decoration:none;
        &:hover{
            opacity:1;

        }
        i.l{
            margin-right:3px;
        }
    }
}
input{
    display:none;
}

input:checked + label{
    .button_inner{
        background:transparent;
        transform:rotate(90deg);
        width:100px;
        border-radius:100px;
        box-shadow:0px 0px 0px 440px rgba(0,0,0,0);
        animation: finalbox .4s 4.42s cubic-bezier(0.39, 2.01, 0.27, 0.75) forwards;
        span.t{
            opacity:0;
            top:20px;
        }
    }
    i.l{
        left:14px;
        opacity:1;
        top:11px;
        animation:down 1s .25s infinite,final .2s 4s forwards;
    }
    .tick{
        position: absolute;
        left: 2px;
        right: 0;
        transform:scale(0) rotate(-90deg);
        color: #00C1FC;
        top: 11px;
        margin: auto;
        font-size: 22px;
        animation: tick .3s 4.7s forwards;
    }
    .button_spots{
        opacity:1;
        @for $i from 0 through 60{
            &:nth-of-type(#{$i}){
                top:(16px - random(10)) - 0 !important;
                left:-34px  !important;
                opacity:0;
                padding:random(20)/4 + 2 + px !important;
                animation:spew 1s .3s forwards,rotate 4s + random(4)/10 .25s + random(12)/10 linear infinite ,final .2s 4s forwards,spot-#{$i} .7s .4/random(10) + random(10)/10 + 10s linear infinite !important;
            }
        }

    }
}
.tick{
    position:absolute;
    left:-40;
    right:0;
    transform:scale(0);
    margin:auto;
    font-size:22px;
}
.button{
    position:absolute;
    top:50%;
    left:0;
    right:0;
    margin:auto;
    text-align:Center;
    height:360px;
    width:200px;
    transform:translateY(-50%);
    h1{
        font-weight:100;
        color:White;
        font-size:24px;
        margin:0;
        text-transform:uppercase;
    }
    h2{
        font-weight:100;
        color:#00C4FF;
        opacity:1;
        font-size:14px;
        margin:4px 0px 0px 0px;
    }
    .b_l_quad .button_spots{
        @for $i from 1 through 20{
            &:nth-child(#{$i}){
                padding:random(3) + 2 + px;
                left: -25 + ($i * 12) + px;
                top: 50 + px;
            }
        }
        @for $i from 20 through 40{
            &:nth-child(#{$i}){
                padding:random(3) + 2 + px;
                left: -255 + ($i * 12) + px;
                top: -12 + px;
            }
        }
        @for $i from 40 through 46{
            &:nth-child(#{$i}){
                padding:random(3) + 2 + px;
                left: 204px;
                top: -488 + ($i * 12) + px;
            }
        }

        @for $i from 46 through 52{
            &:nth-child(#{$i}){
                padding:random(3) + 2 + px;
                left: -10px;
                top: -568 + ($i * 12) + px;
            }
        }
    }
    .button_spots{
        position:absolute;
        border-radius:100px;
        background:green;
        opacity:0;
        animation:opacity 1s;
        @for $i from 1 through 52{
            &:nth-of-type(#{$i}){
                transform-origin:90px - random(10) 20px - random(10);
                background:hsla(350 + random(399) ,57% - random(10) ,65%,1);
                box-shadow:0px 0px 10px rgba(255,255,255,0.12);
                transition:all 1s + random(10)/10;
            }
        }
    }
    &_inner{
        //overflow:hidden;
        border-radius:2px;
        position:absolute;
        width:200px;
        height:50px;
        left:0;
        right:0;
        top:50%;
        margin:auto;
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.04);
        font-weight: 100;
        font-size: 12px;
        cursor:pointer;
        border: 2px solid #FFFFFF;
        color: white;
        text-align: Center;
        transition:all .3s,box-shadow .2s,transform .2s .2s;
        span.t{
            position:relative;
            top:6px;
            opacity:1;
            left:-10px;
            transition:left .4s .1s;


        }
        i.l{
            position: relative;
            left: -19px;
            top: 20px;
            color: #00C4FF;
            font-size: 25px;
            opacity: 0;
            transition: left .3s 0s,top .3s 0s,opacity .3s 0s;
        }
        &:hover{
            color:#2C3940;
            background: white;
            box-shadow: 0px 17px 18px -14px rgba(0, 0, 0, 0.08);
            span.t{
                left:16px;
                transition:left .4s;
            }
            i.l{
                top:12px;
                opacity:1;
                transition: left .3s 0s,top .3s .1s,opacity .3s .1s;
            }
        }
        &:hover .button_spots{
            @for $i from 1 through 19{
                &:nth-of-type(#{$i}){
                    animation: spot-#{$i} .7s .4/random(10) + random(10)/10 + s linear infinite;
                }
            }
            @for $i from 20 through 40{
                &:nth-of-type(#{$i}){
                    animation: spot-#{$i} .7s .4/random(10) + random(10)/10 + s linear infinite;
                }
            }
            @for $i from 40 through 46{
                &:nth-of-type(#{$i}){
                    animation: spot-#{$i} .7s .4/random(10) + random(10)/10 + s linear infinite;
                }
            }
            @for $i from 46 through 54{
                &:nth-of-type(#{$i}){
                    animation: spot-#{$i} .7s .4/random(10) + random(10)/10 + s linear infinite;
                }
            }
        }
    }
}

@for $i from 1 through 20{
    @keyframes spot-#{$i}{
        from{opacity:0;}
        to{transform:translateY(30px) translatex(-20px + $i*2);opacity:.6;}
    }
}
@for $i from 20 through 40{
    @keyframes spot-#{$i}{
        from{opacity:0;}
        to{transform:translateY(-30px) translatex(-50px + $i*2);opacity:.6;}
    }
}
@for $i from 40 through 45{
    @keyframes spot-#{$i}{
        from{opacity:0;}
        to{transform:translateY(-86px + $i*2) translatex(40px);opacity:.6;}
    }
}
@for $i from 46 through 54{
    @keyframes spot-#{$i}{
        from{opacity:0;}
        to{transform:translateY(-99px + $i*2) translatex(-40px);opacity:.6;}
    }
}

@keyframes opacity{
    from{}
    to{opacity:0;}
}

@keyframes rotate{
    from{opacity:.8}
    to{transform:rotate(360deg);opacity:.8}
}

@keyframes down{
    from{left:10px;}
    to{left:57px;}
}

@keyframes spew{
    from{opacity:0;}
    to{opacity:0.8;}
}

@keyframes final{
    from{opacity:1;}
    to{opacity:0;}
}
@keyframes finalbox{
    from{}
    to{width:50px;}
}
@keyframes tick{
    from{}
    to{transform:scale(1) rotate(-90deg)}
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />