body {
    background-color: black;
}

button {
    cursor: pointer;
}

.circle {
    --x: 0vw;
    --y: 0vh;
    --scale: 1;
    --radius: 50%;
    --color: blue;

    position: absolute;
    width: 100px;
    height: 100px;
    background-color: var(--color);
    background: radial-gradient(blue 5%, transparent 100%);
    border-radius: var(--radius);
    box-shadow: inset -5px -5px 40px black;
    transform: translate(var(--x), var(--y)) scale(var(--scale));
    transition: all 1s;
    will-change: transform;
}

.circle.open {
    --scale: 5;
    --radius: 10%;

    --x: 50vw;
    --y: 50vh;

    --color: red;
    z-index: 1000;
}

.circle:hover {
    box-shadow: 1px 1px 20px white;
    cursor: pointer;
}