像素风SCSS&CSS实例

演示

HTML

<button class="btn btn--stripe">Button</button>
<a href="#" class="btn btn--stripe">Link</a>
<button class="btn btn--stripe btn--radius">Aggressive Radius</button>
<button class="btn btn--stripe btn--large">Large Button</button>

CSS

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: sans-serif;
}

.btn {
    overflow: visible;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    line-height: normal;
    cursor: pointer;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    padding: 16px 36px 22px;
    background-color: #fff;
    color: #666;
    border: 2px solid #666;
    border-radius: 6px;
    margin-bottom: 16px;
    transition: all .5s ease;
}

.btn:-moz-focus-inner {
    padding: 0;
    border: 0;
}

.btn--stripe {
    overflow: hidden;
    position: relative;
}

.btn--stripe:after {
    content: '';
    display: block;
    height: 7px;
    width: 100%;
    background-image: repeating-linear-gradient(
        45deg,
        #666,
        #666 1px,
        transparent 2px,
        transparent 5px
    );
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-top: 1px solid #666;
    position: absolute;
    left: 0;
    bottom: 0;
    background-size: 7px 7px;
}

.btn--stripe:hover {
    background-color: #666;
    color: #fff;
    border-color: #000;
}

.btn--stripe:hover:after {
    background-image: repeating-linear-gradient(
        45deg,
        #fff,
        #fff 1px,
        transparent 2px,
        transparent 5px
    );
    border-top: 1px solid #000;
    animation: stripe-slide 12s infinite linear forwards;
}

.btn--large {
    width: 50%;
}

.btn--radius {
    border-radius: 36px;
}

@keyframes stripe-slide {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

SCSS

$color-gray: #666;
$color-black: #000;
$stripe-height: 7px;
$btn-color: $color-gray;
$btn-background: #fff;
$btn-color-hover: #fff;
$btn-background-hover: $color-gray;
$border-color: $color-gray;
$border-color-hover: $color-black;

@mixin reset-button {
    overflow : visible;
    margin : 0;
    padding : 0;
    border : 0;
    background : transparent;
    font : inherit;
    line-height : normal;
    cursor : pointer;
    -moz-user-select : text;
    
    &:-moz-focus-inner {
        padding : 0;
        border : 0;
    }
}

@keyframes stripe-slide {
    0% { background-position: 0% 0; }
    100% { background-position: 100% 0; }
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: sans-serif;
}

.btn {
    @include reset-button;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    padding: 16px 36px 22px;
    background-color: $btn-background;
    color: $btn-color;
    border: 2px solid $border-color;
    border-radius: 6px;
    margin-bottom: 16px;
    transition: all .5s ease;
    
    &--stripe {
        overflow: hidden;
        position: relative;
        
        &:after {
            content: '';
            display: block;
            height: $stripe-height;
            width: 100%;
            background-image: repeating-linear-gradient(
                45deg,
                $border-color,
                $border-color 1px,
                transparent 2px,
                transparent 5px
            );
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-top: 1px solid $border-color;
            position: absolute;
            left: 0;
            bottom: 0;
            background-size: $stripe-height $stripe-height;
        }

        &:hover {
            background-color: $btn-background-hover;
            color: $btn-color-hover;
            border-color: $border-color-hover;

            &:after {
                background-image: repeating-linear-gradient(
                    45deg,
                    $btn-color-hover,
                    $btn-color-hover 1px,
                    transparent 2px,
                    transparent 5px
                );
                border-top: 1px solid $border-color-hover;
                animation: stripe-slide 12s infinite linear forwards;
            }
        }
    }
    
    &--large {
        width: 50%;
    }
    
    &--radius {
        border-radius: 36px;
    }
}