style.css

/* 
    <Instagram Logo: A code generated instagram logo>
    Copyright (C) <2022>  <Cromega>
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published
    by the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.
    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

:root {
    --bg_radial: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

body {
    min-width: 100vh;
    min-height: 100vh;
    display: grid;
    justify-items: center;
    align-items: center;
}

button {
    border: none;
    background-color: rgba(255, 255, 255, 0);
    width: 24em;
    height: 24em;
    border-radius: 7em;
    display: grid;
    justify-content: center;
    align-content: center;
}

button:focus {
    width: 21em;
    height: 21em;
}

button:focus #box {
    animation: to_border_box 500ms ease forwards;
}

button:focus #lens {
    animation: to_border_lens 500ms ease forwards;
}

button:focus #mask {
    animation: to_border_mask 500ms ease forwards;
}

button:focus #flash {
    animation: to_border_flash 500ms ease forwards;
}

#bg {
    padding: 0 0 0 0;
    background-image: var(--bg_radial);
    width: 25em;
    height: 25em;
    border-radius: 5em;
    display: grid;
    justify-content: center;
    align-content: center;
    animation: to_in_glow 500ms ease-out forwards;
}

#bg:hover {
    animation: to_out_glow 250ms ease-out forwards;
}

#box {
    background-color: transparent;
    border: solid;
    border-color: white;
    border-width: 1.2em;
    width: 17em;
    height: 17em;
    border-radius: 4em;
    display: grid;
    justify-content: center;
    align-content: center;
    animation: to_bg_box 500ms ease forwards;
}

#lens {
    border: solid;
    border-color: white;
    border-radius: 50%;
    border-width: 1em;
    width: 8em;
    height: 8em;
    display: grid;
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: center;
    position: relative;
    bottom: 1.4em;
    animation: to_bg_lens 500ms ease forwards;
}

#flash {
    border: solid;
    border-color: white;
    border-radius: 50%;
    border-width: .5em;
    width: 2em;
    height: 2em;
    position: relative;
    bottom: 1em;
    left: 2.2em;
    display: flex;
    flex-direction: row;
    justify-self: end;
    animation: to_bg_flash 500ms ease forwards;
}

#mask {
    background-color: transparent;
    width: 0;
    height: 0;
    border-radius: 50%;
    animation: to_bg_mask 500ms ease forwards;
}

@keyframes to_out_glow {
    from {
        box-shadow: 0 0 0 0 black;
    }
    to {
        box-shadow: 0 0 0 1.5em black;
    }
}

@keyframes to_in_glow {
    from {
        box-shadow: 0 0 0 1.5em black;
    }
    to {
        box-shadow: 0 0 0 0 black;
    }
}

@keyframes to_border_box {
    from {
        background-color: transparent;
        border-color: white;
        width: 17em;
        height: 17em;
    }

    to {
        background-color: white;
        border-color: transparent;
        width: 17.5em;
        height: 17.5em;
    }
}

@keyframes to_border_lens {
    from {
        width: 8em;
        height: 8em;
    }
    to {
        background-image: var(--bg_radial);
        width: 13.3em;
        height: 13.3em;
    }
}

@keyframes to_border_flash {
    from {
        background-color: none;
        width: 2em;
        height: 2em;
        bottom: 1em;
        top: 0;
        left: 2.2em;
    }
    to {
        background-color: #693acd;
        width: 3em;
        height: 3em;
        bottom: 0;
        top: .5em;
        left: .8em;
    }
}

@keyframes to_border_mask {
    from {
        background-color: transparent;
        width: 0;
        height: 0;
        border-radius: 50%;
    }
    to {
        background-color: white;
        width: 8.6em;
        height: 8.6em;
        border-radius: 50%;
    }
}

@keyframes to_bg_box {
    from {
        background-color: white;
        border-color: transparent;
        width: 17.5em;
        height: 17.5em;
    }

    to {
        background-color: transparent;
        border-color: white;
        width: 17em;
        height: 17em;
    }
}

@keyframes to_bg_lens {
    from {
        background-image: var(--bg_radial);
        width: 13.3em;
        height: 13.3em;
    }

    to {
        width: 8em;
        height: 8em;
    }
}

@keyframes to_bg_flash {
    from {
        background-color: #693acd;
        width: 3em;
        height: 3em;
        bottom: 0;
        top: .5em;
        left: .8em;
    }
    to {
        background-color: none;
        width: 2em;
        height: 2em;
        bottom: 1em;
        top: 0;
        left: 2.2em;
    }
}

@keyframes to_bg_mask {
    from {
        background-color: white;
        width: 8.6em;
        height: 8.6em;
        border-radius: 50%;
    }
    to {
        background-color: transparent;
        width: 0;
        height: 0;
        border-radius: 50%;
    }
}