76 views
CSSAdd prefixes
1button { 2 position: relative; 3 display: flex; 4 justify-content: center; 5 align-items: center; 6 border-radius: 5px; 7 background: #fd1853; 8 font-family: "Montserrat", sans-serif; 9 overflow: hidden; 10 border: none; 11} 12 13button:after { 14 content: " "; 15 width: 0%; 16 height: 100%; 17 background: #fff; 18 position: absolute; 19 transition: all 0.4s ease-in-out; 20 right: 0; 21} 22 23button:hover::after { 24 right: auto; 25 left: 0; 26 width: 100%; 27} 28 29button span { 30 text-align: center; 31 text-decoration: none; 32 width: 100%; 33 padding: 18px 25px; 34 color: #fffcfd; 35 font-size: 1.125em; 36 font-weight: 700; 37 letter-spacing: 0.3em; 38 z-index: 20; 39 transition: all 0.3s ease-in-out; 40} 41 42button:hover span { 43 animation: scaleUp 0.3s ease-in-out; 44 color: #fd1853; 45} 46 47button:hover { 48 animation: scaleUp 0.3s ease-in-out; 49} 50 51@keyframes scaleUp { 52 0% { 53 transform: scale(1); 54 } 55 56 50% { 57 transform: scale(0.95); 58 } 59 60 100% { 61 transform: scale(1); 62 } 63} 64 65.star-1 { 66 position: absolute; 67 top: 20%; 68 left: 20%; 69 width: 25px; 70 height: auto; 71 filter: drop-shadow(0 0 0 #fd1853); 72 z-index: -5; 73 transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96); 74} 75 76.star-2 { 77 position: absolute; 78 top: 45%; 79 left: 45%; 80 width: 15px; 81 height: auto; 82 filter: drop-shadow(0 0 0 #fd1853); 83 z-index: -5; 84 transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); 85} 86 87.star-3 { 88 position: absolute; 89 top: 40%; 90 left: 40%; 91 width: 5px; 92 height: auto; 93 filter: drop-shadow(0 0 0 #fd1853); 94 z-index: -5; 95 transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); 96} 97 98.star-4 { 99 position: absolute; 100 top: 20%; 101 left: 40%; 102 width: 8px; 103 height: auto; 104 filter: drop-shadow(0 0 0 #fd1853); 105 z-index: -5; 106 transition: all .8s cubic-bezier(0, 0.4, 0, 1.01); 107} 108 109.star-5 { 110 position: absolute; 111 top: 25%; 112 left: 45%; 113 width: 15px; 114 height: auto; 115 filter: drop-shadow(0 0 0 #fd1853); 116 z-index: -5; 117 transition: all .6s cubic-bezier(0, 0.4, 0, 1.01); 118} 119 120.star-6 { 121 position: absolute; 122 top: 5%; 123 left: 50%; 124 width: 5px; 125 height: auto; 126 filter: drop-shadow(0 0 0 #fd1853); 127 z-index: -5; 128 transition: all .8s ease; 129} 130 131button:hover .star-1 { 132 position: absolute; 133 top: -2%; 134 left: 0%; 135 width: 25px; 136 height: auto; 137 filter: drop-shadow(0 0 10px #fd1853); 138 z-index: 2; 139} 140 141button:hover .star-2 { 142 position: absolute; 143 top: 34%; 144 left: 41.5%; 145 width: 15px; 146 height: auto; 147 filter: drop-shadow(0 0 10px #fd1853); 148 z-index: 2; 149} 150 151button:hover .star-3 { 152 position: absolute; 153 top: 55%; 154 left: 25%; 155 width: 5px; 156 height: auto; 157 filter: drop-shadow(0 0 10px #fd1853); 158 z-index: 2; 159} 160 161button:hover .star-4 { 162 position: absolute; 163 top: 0%; 164 left: 55%; 165 width: 8px; 166 height: auto; 167 filter: drop-shadow(0 0 10px #fd1853); 168 z-index: 2; 169} 170 171button:hover .star-5 { 172 position: absolute; 173 top: 25%; 174 left: 85%; 175 width: 15px; 176 height: auto; 177 filter: drop-shadow(0 0 10px #fd1853); 178 z-index: 2; 179} 180 181button:hover .star-6 { 182 position: absolute; 183 top: 75%; 184 left: 60%; 185 width: 5px; 186 height: auto; 187 filter: drop-shadow(0 0 10px #fd1853); 188 z-index: 2; 189} 190 191
HTML
1<button> 2 <span class="box"> 3 HEART 4 </span> 5 6 <div class="star-1"> 7 <svg height="25" width="25" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> 8 <path d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087 9 c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103 10 c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103 11 C475.116,213.899,475.116,136.489,427.313,88.686z" fill="#fd1853"></path> 12</svg> 13 14 15 </div> 16 <div class="star-2"> 17 <svg height="20" width="20" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> 18 <path d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087 19 c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103 20 c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103 21 C475.116,213.899,475.116,136.489,427.313,88.686z" fill="#fd1853"></path> 22</svg> 23 24 </div> 25 <div class="star-3"> 26 <svg height="9" width="9" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> 27 <path d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087 28 c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103 29 c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103 30 C475.116,213.899,475.116,136.489,427.313,88.686z" fill="#fd1853"></path> 31</svg> 32 33 </div> 34 <div class="star-4"> 35 <svg height="10" width="10" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> 36 <path d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087 37 c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103 38 c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103 39 C475.116,213.899,475.116,136.489,427.313,88.686z" fill="#fd1853"></path> 40</svg> 41 42 </div> 43 <div class="star-5"> 44 <svg height="20" width="20" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> 45 <path d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087 46 c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103 47 c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103 48 C475.116,213.899,475.116,136.489,427.313,88.686z" fill="#fd1853"></path> 49</svg> 50 51 </div> 52 <div class="star-6"> 53 <svg height="7" width="7" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> 54 <path d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087 55 c-47.803-47.803-125.213-47.803-173.016,0c-47.803,47.803-47.803,125.213,0,173.016l190.103,190.103 56 c4.88,4.88,11.316,7.322,17.752,7.322c6.435,0,13.871-2.442,18.751-7.322l190.103-190.103 57 C475.116,213.899,475.116,136.489,427.313,88.686z" fill="#fd1853"></path> 58</svg> 59 60 </div> 61 62</button> 63 64 65 66 67 68