<!-- Font -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">


<p><span class="warning">Warning :</span> It may cause epileptic seizure! </p>


 <div>
  
   <a href="#">Button</a>
</div>

<!-- twitter.com/nazanin_ashrafi -->
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

// *********************
// *******COLORS********
// *********************
$black: #161724;
$neon-green: #64ed85;
$white: #efe;
$purple: #f7003a;
$cyan: #04d3ee;
$pink: #ea0185;
$transparent: rgba(255, 0, 0, 0);
// ***********************
// *******MIXINS**********
// ***********************
@mixin pseudo($w, $h) {
    content: "";
    display: block;
    position: absolute;
    width: $w;
    height: $h;
}

@mixin animation($opacity, $bg-color, $color) {
    opacity: $opacity;
    background: $bg-color;
    color: $color;
}

@mixin size($w, $h) {
    width: $w;
    height: $h;
}

// ***********************
body {
    background: $black;
    font-family: lato;
    overflow: hidden;
}

p {
  font-size: 2.7vmin;
  color: $white;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  // border: solid red 2px;
  .warning {
    color: rgba($purple,.7);
    margin-right: 3px;
  }
}

div {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    a {
        position: absolute;
        text-decoration: none;
        color: $black;
        background: linear-gradient(45deg, $purple, $cyan);
        font-size: 4vmax;
        padding: 15px 35px;
        overflow: hidden;
        border-radius: 5px;
        transition: .5s;
        -webkit-box-reflect: below 35px linear-gradient(transparent, #64ed840e);
        &:active {
            transform: scale(1.02);
        }
        &::before {
            @include pseudo(20px, 20px);
            left: 0;
            top: 0;
            border-top: $transparent solid 4px;
            border-left: $transparent solid 4px;
            transition: 1s;
            // filter: hue-rotate(40deg);
        }
        &::after {
            @include pseudo(20px, 20px);
            right: 0;
            bottom: 0;
            border-bottom: $transparent solid 4px;
            border-right: $transparent solid 4px;
            transition: .8s;
            // filter: hue-rotate(40deg);
        }
        &:hover {
            transition: 1s;
            color: $white;
            background: $transparent;
            animation: blink .5s;
            &::before {
                @include size(100%, 100%);
                width: 100%;
                height: 100%;
                border-top: $purple solid 4px;
                border-left: $purple solid 4px;
                transition: 1s;
                animation: blink .8s;
                // filter: hue-rotate(40deg);
            }
            &::after {
                @include size(100%, 100%);
                border-bottom: $cyan solid 4px;
                border-right: $cyan solid 4px;
                transition: 1s;
                animation: blink .8s;
                // filter: hue-rotate(40deg);
            }
        }
    }
}

// ******************************
// **********ANIMATION***********
// ******************************
@keyframes blink {
    10% {
        opacity: 0;
    }
    15% {
        @include animation(100%, $purple, $black);
    }
    20% {
        opacity: 0;
    }
    25% {
        @include animation(100%, $cyan, $black);
    }
    30% {
        opacity: 0;
    }
    35% {
        @include animation(100%, $purple, $black);
    }
    40% {
        opacity: 0;
    }
    45% {
        @include animation(100%, $cyan, $black);
    }
    50% {
        opacity: 0;
    }
    55% {
        @include animation(100%, $purple, $black);
    }
    60% {
        opacity: 0;
    }
    65% {
        @include animation(100%, $cyan, $black);
    }
    70% {
        opacity: 0;
    }
    75% {
        @include animation(100%, $purple, $black);
    }
    80% {
        opacity: 0;
    }
    85% {
        @include animation(100%, $cyan, $black);
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 100%;
        color: $black;
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.