.draw-outline {
box-shadow:inset 0 0 0 2px #000;
color:#000;
-webkit-transition:color 0.25s 0.125s;
transition:color 0.25s 0.125s;
position:relative;
}
.draw-outline::before,.draw-outline::after {
border:0 solid transparent;
box-sizing:border-box;
content:'';
pointer-events:none;
position:absolute;
width:0;
height:0;
}
.draw-outline::before {
top:0;
right:0;
}
.draw-outline::after {
left:0;
bottom:0;
}
.draw-outline::after {
border-top-width:2px;
border-left-width:2px;
}
.draw-outline::before {
border-bottom-width:2px;
border-right-width:2px;
}
.draw-outline:hover {
color:#00a0e9;
}
.draw-outline:hover::before,.draw-outline:hover::after {
border-color:#00a0e9;
-webkit-transition:border-color 0s,height 0.25s,width 0.25s;
transition:border-color 0s,height 0.25s,width 0.25s;
width:100%;
height:100%;
}
.draw-outline:hover::before {
-webkit-transition-delay:0s,0s,0.25s;
transition-delay:0s,0s,0.25s;
}
.draw-outline:hover::after {
-webkit-transition-delay:0.5s,0.5s,0.75s;
transition-delay:0.5s,0.5s,0.75s;
}
.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;
}
.btn:focus {
outline:2px dotted #55d7dc;
}