Sass Border Drawing Mixin

HTML
<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; }
JAVASCRIPT
Expand for more options Login