Button by Baimyrzaev
#212121
1button { 2 padding: 20px 60px; 3 background-color: #000; 4 border: none; 5 font-size: 18px; 6 position: relative; 7 /* overflow: hidden; */ 8 transition: 500ms; 9} 10 11button span { 12 color: gray; 13 position: relative; 14 transition: 500ms; 15 transition-delay: 500ms; 16 font-size: 16px; 17 text-transform: uppercase; 18 letter-spacing: 2px; 19 font-weight: 600; 20} 21 22button:before { 23 content: ''; 24 position: absolute; 25 width: 0%; 26 height: 0%; 27 left: 50%; 28 right: 50%; 29 top: 50%; 30 bottom: 50%; 31 transition: 500ms; 32 transition-delay: 500ms; 33 background-color: red; 34 box-shadow: 0 0 10px red, 35 0 0 30px red, 36 0 0 50px red; 37} 38 39button div { 40 transition: 500ms; 41 position: absolute; 42 background-color: red; 43 box-shadow: 0 0 15px red, 0 0 30px red, 0 0 50px red; 44} 45 46button .top { 47 width: 15px; 48 height: 2px; 49 top: 0; 50 left: 0; 51} 52 53button .bottom { 54 width: 15px; 55 height: 2px; 56 bottom: 0; 57 right: 0; 58} 59 60button .left { 61 width: 2px; 62 height: 15px; 63 top: 0; 64 left: 0; 65} 66 67button .right { 68 width: 2px; 69 height: 15px; 70 bottom: 0; 71 right: 0; 72} 73 74button:hover { 75 color: #000; 76} 77 78button:hover span { 79 color: #000; 80} 81 82button:hover:before { 83 width: 100%; 84 height: 100%; 85 top: 0; 86 left: 0; 87 right: 0; 88 bottom: 0; 89} 90 91button:hover .top, 92button:hover .bottom { 93 width: 100%; 94} 95 96button:hover .left, 97button:hover .right { 98 height: 100%; 99}
3.5K views
3.5K views
MIT License