3.8K views
1button { 2 position: relative; 3 margin: 0; 4 padding: 17px 35px; 5 outline: none; 6 text-decoration: none; 7 display: flex; 8 justify-content: center; 9 align-items: center; 10 cursor: pointer; 11 text-transform: uppercase; 12 background-color: #fff; 13 border: 1px solid rgba(22, 76, 167, 0.6); 14 border-radius: 10px; 15 color: #1d89ff; 16 font-weight: 400; 17 font-family: inherit; 18 z-index: 0; 19 overflow: hidden; 20 transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); 21} 22 23button span { 24 color: #164ca7; 25 font-size: 14px; 26 font-weight: 500; 27 letter-spacing: 0.7px; 28} 29 30button:hover { 31 animation: rotate624 0.7s ease-in-out both; 32} 33 34button:hover span { 35 animation: storm1261 0.7s ease-in-out both; 36 animation-delay: 0.06s; 37} 38 39@keyframes rotate624 { 40 0% { 41 transform: rotate(0deg) translate3d(0, 0, 0); 42 } 43 44 25% { 45 transform: rotate(3deg) translate3d(0, 0, 0); 46 } 47 48 50% { 49 transform: rotate(-3deg) translate3d(0, 0, 0); 50 } 51 52 75% { 53 transform: rotate(1deg) translate3d(0, 0, 0); 54 } 55 56 100% { 57 transform: rotate(0deg) translate3d(0, 0, 0); 58 } 59} 60 61@keyframes storm1261 { 62 0% { 63 transform: translate3d(0, 0, 0) translateZ(0); 64 } 65 66 25% { 67 transform: translate3d(4px, 0, 0) translateZ(0); 68 } 69 70 50% { 71 transform: translate3d(-3px, 0, 0) translateZ(0); 72 } 73 74 75% { 75 transform: translate3d(2px, 0, 0) translateZ(0); 76 } 77 78 100% { 79 transform: translate3d(0, 0, 0) translateZ(0); 80 } 81} 82 83.btn-shine { 84 border: 1px solid; 85 overflow: hidden; 86 position: relative; 87} 88 89.btn-shine span { 90 z-index: 20; 91} 92 93.btn-shine:after { 94 background: #38ef7d; 95 content: ""; 96 height: 155px; 97 left: -75px; 98 opacity: 0.4; 99 position: absolute; 100 top: -50px; 101 transform: rotate(35deg); 102 transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); 103 width: 50px; 104 z-index: -10; 105} 106 107.btn-shine:hover:after { 108 left: 120%; 109 transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); 110}
MIT License