button

by kazu69

HTML

<a class="btn btn-login">
    <span class="btn-inset"></span>
</a>

SCSS

@mixin btn-inset($deg, $vendor) {
    display: block;
    width: 100%;
    height: 100%;
    border-top: 1px solid rgba(255,255,255,.6);
    border-left: 1px solid rgba(255,255,255,.6);
    background-color: rgba(255,255,255,.4);
    &:before {
        content: ' ';
        position: absolute;
        left: 1px;
        top: -1px;
        width: 1px;
        height: 5px;
        background-color: rgba(255,255,255,.6);
        @include transform-rotate( $deg, $vendor);
    }
}

@mixin btn-base($fill, $blank, $deg, $backgroundcolor, $border, $vendor) {
    position: relative;
    padding: 3px;
    background-color: $backgroundcolor;
    border: 3px solid $border;
    @include boxshadow(0, 3px, 3px, rgba(0, 0, 0, .2), false);

    @each $prefix in $vendor {
        @if $prefix == -webkit- {
            background-image: #{$prefix}linear-gradient(
                $deg,
                $fill,
                $fill 20%,
                $blank 20%,
                $blank 40%,
                $fill 40%,
                $fill 60%,
                $blank 60%,
                $blank 80%,
                $fill 80%,
                $fill 100%
            );

            background-image: #{$prefix}gradient(linear, left top, right bottom,
                from($fill),
                color-stop(20%,$fill),
                color-stop(21%,$blank),
                color-stop(40%,$blank),
                color-stop(41%,$fill),
                color-stop(60%,$fill),
                color-stop(61%,$blank),
                color-stop(80%,$blank),
                color-stop(81%,$fill),
                to($fill)
            );
        }

        @else {
            background-image: #{$prefix}linear-gradient(
                $deg,
                $fill,
                $fill 20%,
                $blank 20%,
                $blank 40%,
                $fill 40%,
                $fill 60%,
                $blank 60%,
                $blank 80%,
                $fill 80%,
               ...