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