Button by dvirpro
#e8e8e8
1.like-button { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 padding: 20px; 6 border: none; 7 border-radius: 50%; 8 background: linear-gradient(145deg, #ff5252, #d50000); 9 box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25); 10 color: #fff; 11 font-family: "Arial", sans-serif; 12 text-transform: uppercase; 13 cursor: pointer; 14 transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); 15 width: 90px; 16 height: 90px; 17 position: relative; 18 overflow: hidden; 19} 20 21.like-button:before { 22 content: "\2764"; /* Heart Icon */ 23 font-size: 50px; 24 color: #fff; 25 position: absolute; 26 top: 50%; 27 left: 50%; 28 transform: translate(-50%, -50%) scale(0); 29 transition: transform 0.3s ease-in-out; 30} 31 32.like-button:hover { 33 animation: heartBeat 0.6s infinite; 34} 35 36.like-button:hover:before { 37 transform: translate(-50%, -50%) scale(1); 38} 39 40.like-button:active:after { 41 transform: translate(-50%, -50%) scale(1); 42 opacity: 1; 43} 44 45@keyframes heartBeat { 46 from { 47 transform: scale(1); 48 } 49 50% { 50 transform: scale(1.1); 51 } 52 to { 53 transform: scale(1); 54 } 55} 56
261 views
261 views
MIT License