Button by iamriishav
#e8e8e8
1button { 2 padding: 15px 30px; 3 border: none; 4 outline: none; 5 border-radius: 30px; 6 font-size: 1.5rem; 7 z-index: 1; 8 position: relative; 9 -webkit-box-shadow: 0 5px 15px rgba(33, 33, 33, .2); 10 box-shadow: 0 5px 15px rgba(33, 33, 33, .2); 11 overflow: hidden; 12 cursor: pointer; 13} 14 15button > span { 16 z-index: 2; 17} 18 19button::before { 20 content: ''; 21 position: absolute; 22 top: 0; 23 left: 0; 24 width: 100%; 25 height: 100%; 26 border-radius: 30px; 27 background-color: #212121; 28 z-index: -1; 29 overflow: hidden; 30 -webkit-transform: scaleX(0); 31 -ms-transform: scaleX(0); 32 transform: scaleX(0); 33 -webkit-transform-origin: left; 34 -ms-transform-origin: left; 35 transform-origin: left; 36 -webkit-transition: -webkit-transform 0.2s ease-in; 37 transition: -webkit-transform 0.2s ease-in; 38 transition: transform 0.2s ease-in; 39} 40 41button:hover { 42 color: #e8e8e8; 43} 44 45button:hover::before { 46 -webkit-transform: scaleX(1); 47 -ms-transform: scaleX(1); 48 transform: scaleX(1); 49 -webkit-transform-origin: left; 50 -ms-transform-origin: left; 51 transform-origin: left; 52}
672 views
672 views
MIT License