#212121
1button { 2 text-transform: uppercase; 3 letter-spacing: 0.1em; 4 padding: 10px 30px; 5 transition: 0.5s; 6 position: relative; 7 font-size: 17px; 8 background: #333; 9 border: none; 10 color: #fff; 11} 12 13button:hover { 14 letter-spacing: 0.25em; 15 background: #ff1867; 16 color: #ff1867; 17 box-shadow: 0 0 45px #ff1867; 18} 19 20button::before { 21 content: ''; 22 position: absolute; 23 inset: 2px; 24 background: #222222; 25} 26 27button span { 28 position: relative; 29 z-index: 1; 30} 31 32button i { 33 position: absolute; 34 inset: 0; 35 display: block; 36} 37 38button i::before { 39 content: ''; 40 position: absolute; 41 border: 2px solid #ff1867; 42 width: 7px; 43 height: 4px; 44 top: -3.5px; 45 left: 80%; 46 background: #222222; 47 transform: translateX(-50%); 48 transition: 0.5s; 49} 50 51button:hover i::before { 52 width: 20px; 53 left: 20%; 54} 55 56button i::after { 57 content: ''; 58 position: absolute; 59 border: 2px solid #ff1867; 60 width: 7px; 61 height: 4px; 62 bottom: -3.5px; 63 left: 20%; 64 background: #222222; 65 transform: translateX(-50%); 66 transition: 0.5s; 67} 68 69button:hover i::after { 70 width: 20px; 71 left: 80%; 72}
Comments
MIT License