2.3K views
CSSAdd prefixes
1button { 2 position: relative; 3 margin: 0; 4 padding: 0.8em 1em; 5 outline: none; 6 text-decoration: none; 7 display: flex; 8 justify-content: center; 9 align-items: center; 10 cursor: pointer; 11 border: none; 12 text-transform: uppercase; 13 background-color: #333; 14 border-radius: 10px; 15 color: #fff; 16 font-weight: 300; 17 font-size: 18px; 18 font-family: inherit; 19 z-index: 0; 20 overflow: hidden; 21 transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); 22} 23 24button:hover { 25 animation: sh0 0.5s ease-in-out both; 26} 27 28@keyframes sh0 { 29 0% { 30 transform: rotate(0deg) translate3d(0, 0, 0); 31 } 32 33 25% { 34 transform: rotate(7deg) translate3d(0, 0, 0); 35 } 36 37 50% { 38 transform: rotate(-7deg) translate3d(0, 0, 0); 39 } 40 41 75% { 42 transform: rotate(1deg) translate3d(0, 0, 0); 43 } 44 45 100% { 46 transform: rotate(0deg) translate3d(0, 0, 0); 47 } 48} 49 50button:hover span { 51 animation: storm 0.7s ease-in-out both; 52 animation-delay: 0.06s; 53} 54 55button::before, 56button::after { 57 content: ''; 58 position: absolute; 59 right: 0; 60 bottom: 0; 61 width: 100px; 62 height: 100px; 63 border-radius: 50%; 64 background: #fff; 65 opacity: 0; 66 transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1); 67 z-index: -1; 68 transform: translate(100%, -25%) translate3d(0, 0, 0); 69} 70 71button:hover::before, 72button:hover::after { 73 opacity: 0.15; 74 transition: transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1); 75} 76 77button:hover::before { 78 transform: translate3d(50%, 0, 0) scale(0.9); 79} 80 81button:hover::after { 82 transform: translate(50%, 0) scale(1.1); 83} 84 85
HTML
1<button> 2 <span>Hover me</span> 3</button>