@LilaRest
#neumorphism#skeuomorphism#animation#minimalist#social#facebook#button#like#heart#realistic
#e8e8e8124 views
CSSAdd prefixes
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}
HTML
1<button> 2 <svg height="32" width="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H24V24H0z" fill="none"></path><path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z"></path></svg> 3 Like 4</button>