Button by ilyas-hadi
#e8e8e8
1.button { 2 padding: 1.1rem 2.2rem; 3 font-size: 1rem; 4 color: #fff; 5 font-weight: 600; 6 transition: all .2s; 7 position: relative; 8 border: none; 9 background: #000; 10} 11 12.button:before,.button:after { 13 content: ""; 14 position: absolute; 15 top: 50%; 16 background: #ff3d00; 17 height: 108%; 18 width: 0; 19 z-index: -1; 20 transition: all .7s; 21 transform: translateY(-50%); 22} 23 24.button:before { 25 left: 0%; 26} 27 28.button:after { 29 right: 0%; 30} 31 32.button:hover { 33 color: #fff; 34 box-shadow: #f51a1a7f 0 30px 60px -12px inset, #ff00007f 0 18px 36px -18px inset; 35 z-index: 2; 36} 37 38.button:hover::before { 39 width: 50%; 40 left: 50%; 41} 42 43.button:hover::after { 44 width: 50%; 45 right: 50%; 46}
549 views
549 views
MIT License