49K views
CSSAdd prefixes
1button { 2 font-family: inherit; 3 font-size: 20px; 4 background: royalblue; 5 color: white; 6 padding: 0.7em 1em; 7 padding-left: 0.9em; 8 display: flex; 9 align-items: center; 10 border: none; 11 border-radius: 16px; 12 overflow: hidden; 13 transition: all 0.2s; 14} 15 16button span { 17 display: block; 18 margin-left: 0.3em; 19 transition: all 0.3s ease-in-out; 20} 21 22button svg { 23 display: block; 24 transform-origin: center center; 25 transition: transform 0.3s ease-in-out; 26} 27 28button:hover .svg-wrapper { 29 animation: fly-1 0.6s ease-in-out infinite alternate; 30} 31 32button:hover svg { 33 transform: translateX(1.2em) rotate(45deg) scale(1.1); 34} 35 36button:hover span { 37 transform: translateX(5em); 38} 39 40button:active { 41 transform: scale(0.95); 42} 43 44@keyframes fly-1 { 45 from { 46 transform: translateY(0.1em); 47 } 48 49 to { 50 transform: translateY(-0.1em); 51 } 52} 53 54
HTML
1<button> 2 <div class="svg-wrapper-1"> 3 <div class="svg-wrapper"> 4 <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 5 <path d="M0 0h24v24H0z" fill="none"></path> 6 <path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z" fill="currentColor"></path> 7 </svg> 8 </div> 9 </div> 10 <span>Send</span> 11</button>