Button by simontheonlyone
#e8e8e8
1.container { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 position: relative; 6 width: 6em; 7 height: 6em; 8 border: none; 9 border-radius: 1em; 10 background: #ddd; 11 box-shadow: 0 0 20px rgba(0, 0, 0, .4); 12 cursor: pointer; 13} 14 15.heart { 16 width: 2.4em; 17 height: 4.3em; 18 border: none; 19 border-radius: 10em; 20 pointer-events: none; 21} 22 23.heart_left { 24 background-color: rgb(252, 102, 56); 25 box-shadow: 0 0 5px rgba(0, 0, 0, .4); 26 transform: rotate(-38deg); 27 margin-right: -16px; 28 z-index: 2; 29} 30 31.heart_right { 32 background-color: rgb(199, 81, 45); 33 box-shadow: 0 0 5px rgba(0, 0, 0, .3); 34 transform: rotate(38deg); 35 z-index: 1; 36} 37 38.container:hover > .heart_left { 39 animation: like 450ms ease forwards; 40} 41 42@keyframes like { 43 0% { 44 margin-right: -16px; 45 } 46 47 25% { 48 transform: rotate(0deg); 49 margin-right: -32px; 50 } 51 52 50% { 53 transform: rotate(-38deg); 54 margin-right: -16px; 55 } 56 57 75% { 58 transform: rotate(0deg); 59 margin-right: -32px; 60 } 61 62 100% { 63 transform: rotate(-38deg); 64 } 65} 66 67.container:hover > .heart_right { 68 animation: loke 450ms ease; 69} 70 71@keyframes loke { 72 25% { 73 transform: rotate(0deg); 74 box-shadow: none; 75 } 76 77 50% { 78 transform: rotate(38deg); 79 } 80 81 75% { 82 transform: rotate(0deg); 83 } 84 85 100% { 86 transform: rotate(38deg); 87 } 88} 89 90.orange_effect, 91.white_effect { 92 position: absolute; 93 inset: 40.5%; 94 border: none; 95 border-radius: .2em; 96 width: 1em; 97 height: 1em; 98 scale: 1; 99 opacity: 1; 100} 101 102.orange_effect { 103 background: rgba(255, 102, 55, .3); 104 transition: scale 250ms linear, opacity 500ms linear 270ms; 105} 106 107.container:hover > .orange_effect { 108 scale: 6; 109 opacity: 0; 110} 111 112.white_effect { 113 background: rgba(255, 134, 42, 0.3); 114 transition: scale 280ms linear 200ms, opacity 500ms linear 270ms; 115} 116 117.container:hover > .white_effect { 118 scale: 6; 119 opacity: 0; 120} 121 122.like { 123 position: absolute; 124 display: flex; 125 align-items: center; 126 justify-content: center; 127 min-width: 10em; 128 min-height: 2.2em; 129 background: #e5e5e5; 130 box-shadow: 0 0 20px rgba(0, 0, 0, .15); 131 font-size: 15px; 132 letter-spacing: 3px; 133 border: none; 134 border-radius: .65em; 135 pointer-events: none; 136 scale: 0; 137 opacity: 0; 138} 139 140.container:focus .like { 141 animation: pop-up 400ms ease forwards; 142} 143 144@keyframes pop-up { 145 0% { 146 top: 0; 147 } 148 149 80%, 100% { 150 top: -60px; 151 scale: 1; 152 opacity: 1; 153 } 154}
539 views
539 views
MIT License