#e8e8e8
1.fancy { 2 background-color: transparent; 3 border: 2px solid #000; 4 border-radius: 0; 5 box-sizing: border-box; 6 color: #fff; 7 cursor: pointer; 8 display: inline-block; 9 float: right; 10 font-weight: 700; 11 letter-spacing: 0.05em; 12 margin: 0; 13 outline: none; 14 overflow: visible; 15 padding: 1.25em 2em; 16 position: relative; 17 text-align: center; 18 text-decoration: none; 19 text-transform: none; 20 transition: all 0.3s ease-in-out; 21 user-select: none; 22 font-size: 13px; 23} 24 25.fancy::before { 26 content: " "; 27 width: 1.5625rem; 28 height: 2px; 29 background: black; 30 top: 50%; 31 left: 1.5em; 32 position: absolute; 33 transform: translateY(-50%); 34 transform-origin: center; 35 transition: background 0.3s linear, width 0.3s linear; 36} 37 38.fancy .text { 39 font-size: 1.125em; 40 line-height: 1.33333em; 41 padding-left: 2em; 42 display: block; 43 text-align: left; 44 transition: all 0.3s ease-in-out; 45 text-transform: uppercase; 46 text-decoration: none; 47 color: black; 48} 49 50.fancy .top-key { 51 height: 2px; 52 width: 1.5625rem; 53 top: -2px; 54 left: 0.625rem; 55 position: absolute; 56 background: #e8e8e8; 57 transition: width 0.5s ease-out, left 0.3s ease-out; 58} 59 60.fancy .bottom-key-1 { 61 height: 2px; 62 width: 1.5625rem; 63 right: 1.875rem; 64 bottom: -2px; 65 position: absolute; 66 background: #e8e8e8; 67 transition: width 0.5s ease-out, right 0.3s ease-out; 68} 69 70.fancy .bottom-key-2 { 71 height: 2px; 72 width: 0.625rem; 73 right: 0.625rem; 74 bottom: -2px; 75 position: absolute; 76 background: #e8e8e8; 77 transition: width 0.5s ease-out, right 0.3s ease-out; 78} 79 80.fancy:hover { 81 color: white; 82 background: black; 83} 84 85.fancy:hover::before { 86 width: 0.9375rem; 87 background: white; 88} 89 90.fancy:hover .text { 91 color: white; 92 padding-left: 1.5em; 93} 94 95.fancy:hover .top-key { 96 left: -2px; 97 width: 0px; 98} 99 100.fancy:hover .bottom-key-1, 101 .fancy:hover .bottom-key-2 { 102 right: 0; 103 width: 0; 104}
20K views
20K views
Comments
Variations
1 MIT License