Button by fanishah
#212121
1.button { 2 position: relative; 3 padding: 12px 25px; 4 font-size: 1.5rem; 5 color: #1e9bff; 6 border: 2px solid rgba(0, 0, 0, 0.5); 7 border-radius: 4px; 8 text-shadow: 0 0 15px #1e9bff; 9 text-decoration: none; 10 text-transform: uppercase; 11 letter-spacing: 0.1rem; 12 transition: 0.5s; 13 z-index: 1; 14} 15 16.button:hover { 17 color: #fff; 18 border: 2px solid rgba(0, 0, 0, 0); 19 box-shadow: 0 0 0px #1e9bff; 20} 21 22.button::before { 23 content: ''; 24 position: absolute; 25 top: 0; 26 left: 0; 27 width: 100%; 28 height: 100%; 29 background: #1e9bff; 30 z-index: -1; 31 transform: scale(0); 32 transition: 0.5s; 33} 34 35.button:hover::before { 36 transform: scale(1); 37 transition-delay: 0.5s; 38 box-shadow: 0 0 10px #1e9bff, 39 0 0 30px #1e9bff, 40 0 0 60px #1e9bff; 41} 42 43.button span { 44 position: absolute; 45 background: #1e9bff; 46 pointer-events: none; 47 border-radius: 2px; 48 box-shadow: 0 0 10px #1e9bff, 49 0 0 20px #1e9bff, 50 0 0 30px #1e9bff, 51 0 0 50px #1e9bff, 52 0 0 100px #1e9bff; 53 transition: 0.5s ease-in-out; 54 transition-delay: 0.25s; 55} 56 57.button:hover span { 58 opacity: 0; 59 transition-delay: 0s; 60} 61 62.button span:nth-child(1), 63.button span:nth-child(3) { 64 width: 40px; 65 height: 4px; 66} 67 68.button:hover span:nth-child(1), 69.button:hover span:nth-child(3) { 70 transform: translateX(0); 71} 72 73.button span:nth-child(2), 74.button span:nth-child(4) { 75 width: 4px; 76 height: 40px; 77} 78 79.button:hover span:nth-child(1), 80.button:hover span:nth-child(3) { 81 transform: translateY(0); 82} 83 84.button span:nth-child(1) { 85 top: calc(50% - 2px); 86 left: -50px; 87 transform-origin: left; 88} 89 90.button:hover span:nth-child(1) { 91 left: 50%; 92} 93 94.button span:nth-child(3) { 95 top: calc(50% - 2px); 96 right: -50px; 97 transform-origin: right; 98} 99 100.button:hover span:nth-child(3) { 101 right: 50%; 102} 103 104.button span:nth-child(2) { 105 left: calc(50% - 2px); 106 top: -50px; 107 transform-origin: top; 108} 109 110.button:hover span:nth-child(2) { 111 top: 50%; 112} 113 114.button span:nth-child(4) { 115 left: calc(50% - 2px); 116 bottom: -50px; 117 transform-origin: bottom; 118} 119 120.button:hover span:nth-child(4 ) { 121 bottom: 50%; 122}
879 views
879 views
MIT License