Button by ShrinilDhorda
#e8e8e8
1.crushbtn { 2 font-size: 2rem; 3 padding: 0.7rem 2.4rem; 4 letter-spacing: .3rem; 5 border-radius: 1.5rem; 6 position: relative; 7 background-color: #e8e8e8; 8 color: red; 9 border: none; 10 text-shadow: 0 0 3px #ff6e6e; 11 overflow: hidden; 12 cursor: pointer; 13 transition: 0.7s; 14 z-index: 2; 15} 16 17.heart1 svg { 18 position: absolute; 19 left: 4.5rem; 20 top: 1.8rem; 21 opacity: 0; 22 fill: red; 23 stroke: none; 24 transition: 0.7s; 25 width: 2rem; 26 height: 2rem; 27 animation: move1 5s ease-in-out infinite alternate-reverse; 28} 29 30.heart2 svg { 31 position: absolute; 32 left: 0.8rem; 33 opacity: 0; 34 top: 0.3rem; 35 width: 1.5rem; 36 height: 1.5rem; 37 fill: red; 38 stroke: none; 39 transform: rotate(-20deg ); 40 animation: move2 5s ease infinite alternate-reverse; 41} 42 43.heart3 svg { 44 position: absolute; 45 right: 1rem; 46 top: 0.5rem; 47 opacity: 0; 48 width: 1.4rem; 49 height: 1.4rem; 50 transform: rotate(20deg); 51 fill: red; 52 stroke: none; 53 z-index: -1; 54 animation: move3 5s ease infinite alternate-reverse; 55} 56 57@keyframes move1 { 58 0% { 59 top: 2rem; 60 } 61 62 50% { 63 top: 4rem; 64 } 65 66 100% { 67 top: 2rem; 68 } 69} 70 71@keyframes move2 { 72 0% { 73 top: 0.3rem; 74 } 75 76 50% { 77 top: 1.5rem; 78 } 79 80 100% { 81 top: 0.3rem; 82 } 83} 84 85@keyframes move3 { 86 0% { 87 top: 1.5rem; 88 } 89 90 50% { 91 top: .6rem; 92 } 93 94 100% { 95 top: 1.5rem; 96 } 97} 98 99.crushbtn:hover .heart1 svg, 100.crushbtn:hover .heart2 svg, 101.crushbtn:hover .heart3 svg { 102 opacity: 1; 103 filter: drop-shadow(0 0 10px #ff6e6e) 104} 105 106.crushbtn:hover { 107 color: red; 108 box-shadow: 0 0 10px inset #ff6e6e; 109 scale: 105%; 110} 111 112.crushbtn:active { 113 scale: 100%; 114}
845 views
845 views
MIT License