This post is saved as a draft.
#212121
1/* Start Button 1 */ 2button { 3 padding: 15px 60px; 4 background: transparent; 5 border: 2px solid #edff00; 6 font-size: 15px; 7 font-weight: bold; 8 color: #ffffff; 9 border-radius: 6px; 10 cursor: pointer; 11 position: relative; 12 display: flex; 13 overflow: hidden; 14 transition: all 0.5s; 15 text-transform: uppercase; 16} 17 18button:hover { 19 color: #0c071e; 20} 21 22button span { 23 transition: all 0.5s; 24 z-index: -1; 25} 26 27button span:nth-child(1), 28button span:nth-child(2), 29button span:nth-child(3), 30button span:nth-child(4) { 31 position: absolute; 32 width: 100%; 33 height: 15px; 34 background-color: #edff00 35} 36 37button span:nth-child(1) { 38 top: -100%; 39 left: 0%; 40 right: 0; 41} 42 43button:hover span:nth-child(1) { 44 top: 0%; 45} 46 47button span:nth-child(2) { 48 top: 10px; 49 right: 100%; 50} 51 52button:hover span:nth-child(2) { 53 right: 0; 54} 55 56button span:nth-child(3) { 57 top: 20px; 58 left: 100%; 59 right: 0; 60} 61 62button:hover span:nth-child(3) { 63 left: 0; 64} 65 66button span:nth-child(4) { 67 bottom: -100%; 68 left: 0; 69} 70 71button:hover span:nth-child(4) { 72 bottom: 0; 73} 74 75/* End Button 1 */
Variation of abutton
Variation of abutton