[CSS] border effect css

 

<button class="btn draw-outline">Draw button</button>

/* scss */
@mixin btn-border-outline($color: #ccc, $hover: black, $width: 2px, $vertical: top, $horizontal: left, $direction: horizontal, $duration: 0.25s) {
  $h-side: if($horizontal == 'left', 'right', 'left');
  $v-side: if($vertical == 'top', 'bottom', 'top');

  $dir-1: 'height';
  $dir-2: 'width';
  $pseudo-1: 'after';
  $pseudo-2: 'before';
  
  @if($direction == 'horizontal') {
    $dir-1: 'width';
    $dir-2: 'height';
    $pseudo-1: 'before';
    $pseudo-2: 'after';
  }
  
  box-shadow: inset 0 0 0 $width $color;
  color: $color;
  transition: color $duration $duration/2;
  position: relative;

  &::before,
  &::after {
    border: 0 solid transparent;
    box-sizing: border-box;
    content: '';
    pointer-events: none;
    position: absolute;
    width: 0; height: 0;
  }

  &::before {
    #{$vertical}: 0; 
    #{$horizontal}: 0;
  }
  
  &::after {
    #{$h-side}: 0;
    #{$v-side}: 0;
  }

  &::#{$pseudo-1} {
    border-#{$vertical}-width: $width;
    border-#{$h-side}-width: $width;
  }

  &::#{$pseudo-2} {
    border-#{$v-side}-width: $width;
    border-#{$horizontal}-width: $width;
  }
  
  &:hover {
    color: $hover;
    
    &::before,
    &::after {
      border-color: $hover;
      transition: border-color 0s, unquote($dir-1) $duration,  unquote($dir-2) $duration;
      width: 100%;
      height: 100%;
    }
    
    &::before { transition-delay: 0s, 0s, $duration; }
    &::after { transition-delay: $duration * 2, $duration * 2, $duration * 3; }
  }
}


.draw-outline {
  @include btn-border-outline(#c994bd, #90f183, 4px, top, right, vertical);
}

//=== Button styling, semi-ignore
.btn {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1.5;
  font: 700 1.2rem 'Roboto Slab', sans-serif;
  padding: 1em 2em;
  letter-spacing: 0.05rem;
  
  &:focus { outline: 2px dotted #55d7dc; }
}

//=== Pen styling, ignore
body { 
  background: #1a1f25;
  display: flex; 
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

 

https://codepen.io/giana/pen/yYBpVY