<button type="button">
    CLICK
</button>

$subtlepink: rgba(238, 174, 202, 1);
$subtleblue: rgba(148, 187, 233, 1);
$buttonsize: 250px;

body,
html {
    height: 100%;
    display: grid;
    background: rgb(238, 174, 202);
    background: linear-gradient(30deg, $subtlepink 0%, $subtleblue 100%);
}

button {
    margin: auto;
    padding: 0;
    border: none;
    border-radius: 35%;
    width: $buttonsize;
    height: $buttonsize;
    background: rgb(238, 174, 202);
    background: linear-gradient(30deg, $subtlepink 0%, $subtleblue 100%);
    color: rgba(195, 180, 216, 1);
    font-size: 3.6em;
    font-weight: 600;

    box-shadow: inset 0 0 35px 0px rgba(0, 0, 0, 0.25),
        inset 0 2px 1px 1px rgba(255, 255, 255, 0),
        1px 1px 15px 2px rgba(154, 137, 164, 0.5);

    text-shadow: 1px -1px 3px rgba(143, 162, 199, 1),
        -1px 1px 3px rgba(192, 151, 178, 1);
    outline: none;

    -webkit-transition: box-shadow 0.4s, text-shadow 0.5s;
    -moz-transition: box-shadow 0.4s, text-shadow 0.5s;
    transition: box-shadow 0.4s, text-shadow 0.5s;

    &:hover {
        cursor: pointer;

        box-shadow: inset 0 0 35px 0px rgba(0, 0, 0, 0.15),
            inset 0 2px 1px 1px rgba(255, 255, 255, 0),
            1px 1px 15px 2px rgba(154, 137, 164, 0.1);

        text-shadow: 3px -3px 5px rgba(143, 162, 199, 1),
            -3px 3px 5px rgba(192, 151, 178, 1);

        -webkit-transition: box-shadow 0.4s, text-shadow 0.5s;
        -moz-transition: box-shadow 0.4s, text-shadow 0.5s;
        transition: box-shadow 0.4s, text-shadow 0.5s;
    }

    &:active {
        background: linear-gradient(
            30deg,
            rgba(210, 178, 212, 1) 0%,
            rgba(177, 183, 223, 1) 100%
        );
        color: rgba(192, 181, 218, 1);

        box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.15),
            1px 1px 15px 2px rgba(154, 137, 164, 0.1);

        text-shadow: 1px -1px 1px rgba(143, 162, 199, 0.75),
            -1px 1px 1px rgba(192, 151, 178, 0.75);

        -webkit-transition: background 0.3s color 0.2s,
            text-shadow 0.3s box-shadow 0.3s;
        -moz-transition: background 0.3s color 0.2s,
            text-shadow 0.3s box-shadow 0.3s;
        transition: background 0.3s color 0.2s, text-shadow 0.3s box-shadow 0.3s;
    }
}