#212121
1button { 2 position: relative; 3 padding: 10px 20px; 4 border-radius: 7px; 5 border: 1px solid rgb(61, 106, 255); 6 font-size: 14px; 7 text-transform: uppercase; 8 font-weight: 600; 9 letter-spacing: 2px; 10 background: transparent; 11 color: #fff; 12 overflow: hidden; 13 box-shadow: 0 0 0 0 transparent; 14 -webkit-transition: all 0.2s ease-in; 15 -moz-transition: all 0.2s ease-in; 16 transition: all 0.2s ease-in; 17} 18 19button:hover { 20 background: rgb(61, 106, 255); 21 box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815); 22 -webkit-transition: all 0.2s ease-out; 23 -moz-transition: all 0.2s ease-out; 24 transition: all 0.2s ease-out; 25} 26 27button:hover::before { 28 -webkit-animation: sh02 0.5s 0s linear; 29 -moz-animation: sh02 0.5s 0s linear; 30 animation: sh02 0.5s 0s linear; 31} 32 33button::before { 34 content: ''; 35 display: block; 36 width: 0px; 37 height: 86%; 38 position: absolute; 39 top: 7%; 40 left: 0%; 41 opacity: 0; 42 background: #fff; 43 box-shadow: 0 0 50px 30px #fff; 44 -webkit-transform: skewX(-20deg); 45 -moz-transform: skewX(-20deg); 46 -ms-transform: skewX(-20deg); 47 -o-transform: skewX(-20deg); 48 transform: skewX(-20deg); 49} 50 51@keyframes sh02 { 52 from { 53 opacity: 0; 54 left: 0%; 55 } 56 57 50% { 58 opacity: 1; 59 } 60 61 to { 62 opacity: 0; 63 left: 100%; 64 } 65} 66 67button:active { 68 box-shadow: 0 0 0 0 transparent; 69 -webkit-transition: box-shadow 0.2s ease-in; 70 -moz-transition: box-shadow 0.2s ease-in; 71 transition: box-shadow 0.2s ease-in; 72} 73
18K views
18K views
Comments
MIT License