Button by kevkevkevin
#e8e8e8
1.button { 2 font-size: 16px; 3 font-weight: 700; 4 color: #292930; 5 background: #ffdc60; 6 height: 60px; 7 line-height: 60px; 8 text-align: center; 9 padding: 0 50px; 10 position: relative; 11 z-index: 1; 12 overflow: hidden; 13 border-radius: 10px; 14 text-transform: capitalize; 15 cursor: pointer; 16 border: none; 17 box-shadow: 0px 0px 77px 12px rgba(0,0,0,0.13); 18 -webkit-box-shadow: 0px 0px 77px 12px rgba(0,0,0,0.13); 19 -moz-box-shadow: 0px 0px 77px 12px rgba(0,0,0,0.13); 20} 21 22button:before, button:after { 23 content: ""; 24 background: #5956e9; 25 height: 50%; 26 width: 0; 27 position: absolute; 28 transition: .3s cubic-bezier(.785,.135,.15,.86); 29 -webkit-transition: .3s cubic-bezier(.785,.135,.15,.86); 30 z-index: -1; 31} 32 33button::before { 34 top: 0; 35 left: 0; 36 right: auto; 37} 38 39button:after { 40 bottom: 0; 41 right: 0; 42 left: auto; 43} 44 45button:hover { 46 color: #fff; 47 background-color: #57c9da; 48} 49 50button:hover:before { 51 width: 100%; 52 right: 0; 53 left: auto; 54} 55 56button:hover::after { 57 width: 100%; 58 left: 0; 59 right: auto; 60} 61
356 views
356 views
MIT License