Build button with transparent background color with gradient border and rounded corners

index.html

<a href="#">
    <span></span>
    Do Something
</a>

style.scss

a {
    font-weight     : 400;
    font-size       : 18px;
    line-height     : 46px;
    color           : #333;
    text-decoration : none;
    outline         : none;
    position        : relative;
    display         : inline-block;
    padding         : 0 25px;
    border-radius   : 5px;
    border          : 2px solid #6BC7E2;

    span {
        position      : absolute;
        right         : -2px;
        top           : -2px;
        height        : 108%;
        width         : 50%;
        border-radius : 5px;
        border        : 2px solid #8574E4;
        border-left   : 0;
        clip-path     : polygon(14% 0, 100% 0, 100% 100%, 14% 100%);
    }

    &:before {
        content    : '';
        display    : block;
        position   : absolute;
        top        : -2px;
        left       : 5px;
        width      : 97%;
        height     : 2px;
        z-index    : 10;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6bc7e2+0,8574e4+100 */
        background : #6BC7E2; /* Old browsers */
        background : -moz-linear-gradient(left, #6BC7E2 0%, #8574E4 100%); /* FF3.6-15 */
        background : -webkit-linear-gradient(left, #6BC7E2 0%, #8574E4 100%); /* Chrome10-25,Safari5.1-6 */
        background : linear-gradient(to right, #6BC7E2 0%, #8574E4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter     : progid:DXImageTransform.Microsoft.gradient(startColorstr='#6bc7e2', endColorstr='#8574e4', GradientType=1); /* IE6-9 */
    }

    &:after {
        content    : '';
        display    : block;
        position   : absolute;
        bottom     : -2px;
        left       : 5px;
        width      : 97%;
        height     : 2px;
        z-index    : 10;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6bc7e2+0,8574e4+100 */
        background : #6BC7E2; /* Old browsers */
        background : -moz-linear-gradient(left, #6BC7E2 0%, #8574E4 100%); /* FF3.6-15 */
        background : -webkit-linear-gradient(left, #6BC7E2 0%, #8574E4 100%); /* Chrome10-25,Safari5.1-6 */
        background : linear-gradient(to right, #6BC7E2 0%, #8574E4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter     : progid:DXImageTransform.Microsoft.gradient(startColorstr='#6bc7e2', endColorstr='#8574e4', GradientType=1); /* IE6-9 */
    }

    &:hover {
        text-decoration : none;
    }
}