#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 margin-right: 11px; 44 fill: rgb(255, 110, 110); 45 transition: opacity 100ms ease-in-out; 46} 47 48.filled { 49 position: absolute; 50 opacity: 0; 51 top: 20px; 52 left: 22px; 53} 54 55@keyframes beatingHeart { 56 0% { 57 transform: scale(1); 58 } 59 60 15% { 61 transform: scale(1.15); 62 } 63 64 30% { 65 transform: scale(1); 66 } 67 68 45% { 69 transform: scale(1.15); 70 } 71 72 60% { 73 transform: scale(1); 74 } 75} 76 77button:hover .empty { 78 opacity: 0; 79} 80 81button:hover .filled { 82 opacity: 1; 83 animation: beatingHeart 1.2s infinite; 84}
7.5K views
7.5K views
Comments
MIT License