Seeking a way to create a button with an animated border that looks like it is being drawn.
Current progress involves some code, but it's not working smoothly with border-radius set. (keep an eye on the corners)
https://codepen.io/anon/pen/MbWagQ
<button class="draw">draw</button>
//Colors
$cyan: #60daaa;
$red: #f45e61;
// Basic styles
button {
background: none;
border: 0;
box-sizing: border-box;
color: $red;
font-size: inherit;
font-weight: 700;
padding: 1em 2em;
text-align: center;
margin: 20px;
// Necessary for pseudo-elements absolute positioning
position: relative;
vertical-align: middle;
&::before,
&::after {
box-sizing: border-box;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
}
.draw {
transition: color 0.25s;
border-radius: 7px;
&::before,
&::after {
border-radius: 7px;
border: 3px solid transparent;
width: 0;
height: 0;
}
// Top & right borders expanding effect
&::before {
top: 0;
left: 0;
}
// Bottom & left borders expanding effect
&::after {
bottom: 0;
right: 0;
}
&:hover {
color: $cyan;
}
// Hover effects
&:hover::before,
&:hover::after {
width: 100%;
height: 100%;
}
&:hover::before {
border-top-color: $cyan;
border-right-color: $cyan;
transition:
width 0.25s ease-out,
height 0.25s ease-out 0.25s;
}
&:hover::after {
border-bottom-color: $cyan;
border-left-color: $cyan;
transition:
border-color 0s ease-out 0.5s,
width 0.25s ease-out 0.5s,
height 0.25s ease-out 0.75s;
}
}
Preferably looking to achieve this effect using only HTML and CSS, avoiding SVG files if possible. JavaScript could be considered as well.