Button by John-CFO
#212121
1.BTN-style { 2 position: relative; 3 width: 12em; 4 height: 3.8em; 5 border-width: 2px; 6 border-radius: 6px; 7 border-color: #ffff; 8 display: block; 9 padding: 8px; 10 background: linear-gradient(to left, #c0c0c0, #dcdcdc); 11 color: #ffffff; 12 line-height: 1.25rem; 13 box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); 14 overflow: hidden; 15} 16 17.BTN-text { 18 font-weight: 500; 19 font-size: 0.975rem; 20 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9); 21 text-transform: uppercase; 22} 23 24.BTN-style:hover { 25 -webkit-transition: all 0.2s ease-out; 26 -moz-transition: all 0.2s ease-out; 27 transition: all 0.2s ease-out; 28 29 cursor: pointer; 30} 31 32.BTN-style:hover::before { 33 -webkit-animation: sh02 0.5s 0s linear; 34 -moz-animation: sh02 0.5s 0s linear; 35 animation: sh02 0.5s 0s linear; 36} 37 38.BTN-style::before { 39 content: ""; 40 display: block; 41 width: 0px; 42 height: 85%; 43 position: absolute; 44 top: 50%; 45 left: 0%; 46 opacity: 0; 47 background: #fff; 48 box-shadow: 0 0 50px 30px #fff; 49 -webkit-transform: skewX(-20deg); 50 -moz-transform: skewX(-20deg); 51 -ms-transform: skewX(-20deg); 52 -o-transform: skewX(-20deg); 53 transform: skewX(-20deg); 54} 55 56@keyframes sh02 { 57 from { 58 opacity: 0; 59 left: 0%; 60 } 61 62 50% { 63 opacity: 1; 64 } 65 66 to { 67 opacity: 0; 68 left: 100%; 69 } 70} 71
56 views
56 views
MIT License