<div class="wrap">
    <button>Button</button>
</div>

$white: #FFF;
$purple: #8B60B7;

html, body {
    height: 100%;
}

body {
    background: lighten($purple, 8%);
    background: linear-gradient(135deg, lighten($purple, 16%) 0%, darken($purple, 32%) 100%);
    width: 100%;
    display: table;
    font-family: 'Lato', sans-serif;
}

.wrap {
    display: table-cell;
    vertical-align: middle;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
    perspective: 800px;
}

button {
    position: relative;
    display: inline-block;
    padding: 24px 60px;
    border: 6px solid $white;
    background: transparent;
    color: $white;
    text-transform: uppercase;
    font-family: inherit;
    font-size: 48px;
    font-weight: 900;
    outline: none;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.4s, color 0.4s, border 0.4s;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        background: $white;
        z-index: -1;
        transition: height 0.4s;
    }

    &:after {
        content: '';
        width: 100%;
        height: 32px;
        padding: 0 6px;
        background: darken($purple, 24%);
        position: absolute;
        top: 100%;
        left: -6px;
        margin-top: 2px;
        transform-origin: 0 0;
        transform: rotateX(-90deg);
    }

    &:hover {
        color: $purple;
        border-color: darken($purple, 8%);
        transform: rotateX(45deg);

        &:before {
            height: 100%;
        }
    }
}