Simple Material Design-ish hover effect button

material-button.html

<div class="button primary">
    <a href="#">button text</a>
</div>

mixins.scss

@mixin center($xy:xy) {
    @if $xy == xy {
        left: 50%;
        top: 50%;
        bottom: auto;
        right: auto;
        transform: translateX(-50%) translateY(-50%);
      }
    @else if $xy == x {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    @else if $xy == y {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }
}

style.scss

.button {
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 3px;

    z-index: 1;

    a {
        position: relative;
        display: block;
        padding: 10px;
        z-index: 3;
        transition: .25s ease-in-out;
        transition-delay: .25s;
    }

    &::after {
        @include center();
        content: '';
        height: 0;
        width: 0;
        position: absolute;
        border-radius: 50%;
        z-index: 2;
        transition: .5s ease-in-out;
	}

    &.primary {
        background-color: $example-colour;

        a {
            color: white;
    	}

        &::after {
            background-color: darken($example-colour, 10%);
    	}
    }

    &.ghost-primary {
        border: 2px solid $example-colour;

        a {
            color: $example-colour;
    	}

        &::after {
            background-color: $example-colour;
    	}
    }

    &:hover {

        a {
            color: white;
    	}

        &::after {
            height: 200px;
            width: 200px;
    	}
    }
}