Button by simontheonlyone
#212121
1.button { 2 position: relative; 3 width: 10em; 4 height: 2em; 5 text-align: center; 6 font-family: poppins; 7 font-size: 17px; 8 font-weight: 300; 9 letter-spacing: 5px; 10 text-transform: uppercase; 11 color: #fff; 12 cursor: pointer; 13 background-color: rgba(3, 3, 3, .5); 14 border: none; 15 transition: color .2s linear, 16 box-shadow .3s linear, 17 background-color .3s cubic-bezier(0.25, 0.8, 0.25, 1); 18} 19 20.button:focus, 21.button:hover { 22 box-shadow: 0 0 110px #fff; 23 background-color: rgba(255, 255, 255, 0.4); 24 color: #111; 25 font-weight: 500; 26} 27 28.button:focus:before, 29.button:hover:before, 30.button:focus:after, 31.button:hover:after { 32 width: 100%; 33 left: 0%; 34} 35 36.button:before, 37.button:after { 38 content: ''; 39 position: absolute; 40 pointer-events: none; 41 left: 50%; 42 width: 0%; 43 height: 2px; 44 background-color: #fff; 45 transition: width, left, 250ms cubic-bezier(0.25, .8, .25, 1); 46} 47 48.button:before { 49 top: -2px; 50} 51 52.button:after { 53 bottom: -2px; 54}
836 views
836 views
MIT License