Button by adamgiebl
#e8e8e8
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 cursor: pointer; 15} 16 17button span { 18 display: block; 19 margin-left: 0.3em; 20 transition: all 0.3s ease-in-out; 21} 22 23button svg { 24 display: block; 25 transform-origin: center center; 26 transition: transform 0.3s ease-in-out; 27} 28 29button:hover .svg-wrapper { 30 animation: fly-1 0.6s ease-in-out infinite alternate; 31} 32 33button:hover svg { 34 transform: translateX(1.2em) rotate(45deg) scale(1.1); 35} 36 37button:hover span { 38 transform: translateX(5em); 39} 40 41button:active { 42 transform: scale(0.95); 43} 44 45@keyframes fly-1 { 46 from { 47 transform: translateY(0.1em); 48 } 49 50 to { 51 transform: translateY(-0.1em); 52 } 53} 54
85K views
MIT License