$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;
            }
          }
        }
      }

      Css language logo
      Stripe Slide Effect

      Stripe
      Custom Buttons in CSS

      Stripe Slide Effect

      Shortcut: btn.ss

      0 Comments

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.