1.draw-border {
2 box-shadow: inset 0 0 0 4px #58afd1;
3 color: #58afd1;
4 transition: color 0.25s 0.0833333333s;
5 position: relative;
6}
7
8.draw-border::before, .draw-border::after {
9 border: 0 solid transparent;
10 box-sizing: border-box;
11 content: "";
12 pointer-events: none;
13 position: absolute;
14 width: 0;
15 height: 0;
16 bottom: 0;
17 right: 0;
18}
19
20.draw-border::before {
21 border-bottom-width: 4px;
22 border-left-width: 4px;
23}
24
25.draw-border::after {
26 border-top-width: 4px;
27 border-right-width: 4px;
28}
29
30.draw-border:hover {
31 color: #ffe593;
32}
33
34.draw-border:hover::before, .draw-border:hover::after {
35 border-color: #ffe593;
36 transition: border-color 0s, width 0.25s, height 0.25s;
37 width: 100%;
38 height: 100%;
39}
40
41.draw-border:hover::before {
42 transition-delay: 0s, 0s, 0.25s;
43}
44
45.draw-border:hover::after {
46 transition-delay: 0s, 0.25s, 0s;
47}
48
49.btn {
50 background: none;
51 border: none;
52 cursor: pointer;
53 line-height: 1.5;
54 font: 700 17px "Roboto Slab", sans-serif;
55 padding: 1em 2em;
56 letter-spacing: 0.05rem;
57}
58
59.btn:focus {
60 outline: 2px dotted #55d7dc;
61}
62
63