#e8e8e8
1button { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 padding: 20px 25px 20px 22px; 6 box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; 7 background-color: #e8e8e8; 8 border-color: #ffe2e2; 9 border-style: solid; 10 border-width: 9px; 11 border-radius: 35px; 12 font-size: 25px; 13 font-weight: 900; 14 color: rgb(134, 124, 124); 15 font-family: monospace; 16 transition: transform 400ms cubic-bezier(.68,-0.55,.27,2.5), 17 border-color 400ms ease-in-out, 18 background-color 400ms ease-in-out; 19 word-spacing: -2px; 20} 21 22@keyframes movingBorders { 23 0% { 24 border-color: #fce4e4; 25 } 26 27 50% { 28 border-color: #ffd8d8; 29 } 30 31 90% { 32 border-color: #fce4e4; 33 } 34} 35 36button:hover { 37 background-color: #eee; 38 transform: scale(105%); 39 animation: movingBorders 3s infinite; 40} 41 42button svg { 43 fill: rgb(255, 110, 110); 44 margin-right: 13px; 45} 46 47@keyframes beatingHeart { 48 0% { 49 transform: scale(1); 50 } 51 52 15% { 53 transform: scale(1.15); 54 } 55 56 30% { 57 transform: scale(1); 58 } 59 60 45% { 61 transform: scale(1.15); 62 } 63 64 60% { 65 transform: scale(1); 66 } 67} 68 69button:hover svg { 70 animation: beatingHeart 1.2s infinite; 71}
Comments
MIT License