#212121
1button { 2 cursor: pointer; 3 background: transparent; 4 position: relative; 5 display: inline-block; 6 padding: 15px 30px; 7 outline: none; 8 border: 2px solid #0f0; 9 margin: 40px; 10 width: 150px; 11 height: 60px; 12 text-transform: uppercase; 13 font-weight: 900; 14 text-decoration: none; 15 letter-spacing: 2px; 16 color: #fff; 17 -webkit-box-reflect: below 0px linear-gradient(transparent, #0002); 18 transition: 0.45s; 19 transition-delay: 0s; 20} 21 22button:hover { 23 transition-delay: 1.5s; 24 color: #000; 25 box-shadow: 0 0 10px #0f0, 26 0 0 20px #0f0, 27 0 0 40px #0f0, 28 0 0 80px #0f0, 29 0 0 100px #0f0; 30} 31 32button span { 33 position: relative; 34 z-index: 100; 35} 36 37button::before { 38 content: ""; 39 position: absolute; 40 left: -20px; 41 top: 50%; 42 transform: translateY(-50%); 43 width: 20px; 44 height: 2px; 45 background: #0f0; 46 box-shadow: 5px -8px 0 #0f0, 47 5px 8px 0 #0f0; 48 transition: width 0.5s, 49 left 0.5s, 50 height 0.5s, 51 box-shadow 0.5s; 52 transition-delay: 1s, 0.5s, 0s, 0s; 53} 54 55button:hover::before { 56 width: 60%; 57 height: 100%; 58 /* right: -2px; */ 59 left: -2px; 60 box-shadow: 5px 0 0 #0f0, 61 5px 0 0 #0f0; 62 transition-delay: 0s, 0.5s, 1s, 1s; 63} 64 65button::after { 66 content: ""; 67 position: absolute; 68 right: -20px; 69 top: 50%; 70 transform: translateY(-50%); 71 width: 20px; 72 height: 2px; 73 background: #0f0; 74 box-shadow: -5px -8px 0 #0f0, 75 -5px 8px 0 #0f0; 76 transition: width 0.5s, right 0.5s, height 0.5s, box-shadow 0.5s; 77 transition-delay: 1s, 0.5s, 0s, 0s; 78} 79 80button:hover::after { 81 width: 60%; 82 height: 102%; 83 right: -2px; 84 box-shadow: -5px 0 0 #0f0, -5px 0 0 #0f0; 85 transition-delay: 0s, 0.5s, 1s, 1s; 86} 87
2.6K views
2.6K views
Comments
MIT License