.button {
    position: absolute;
    margin: auto;
    top: 0; bottom: 0; left: 0; right: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 2em;
    font-family: monospace;
    color: #aba3d8;

    width: 300px;
    height: 300px;

    border-radius: 50%;
    box-shadow:  30px 30px 60px #3d2e4b,
                -30px -30px 60px #533e65;
}

.button::after,
.button::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    top: 0; bottom: 0; left: 0; right: 0;
}

.button::before {
    background: linear-gradient(145deg, #4d3a5e, #41314f);
}

.button::after {
    background: linear-gradient(145deg, #41314f, #4d3a5e);
    opacity: 0%;
    transition: opacity 0.3s ease-in-out;
}

.button:active::after {
    opacity: 100%;
}

.button p {
    text-align: center;
    transition: opacity 0.3s ease-in-out;
    filter: drop-shadow(0 0 5px #9b8ca8);
}

.button:active p {
    opacity: 40%;
    transition: opacity 0.3s ease-in-out;
}

html {
    background-color: #483658;
}