191 views
CSSAdd prefixes
1button { 2 background: linear-gradient(45deg, transparent 27%, #fd1853 5%, #fd1853 73%, transparent 27%); 3 box-shadow: 6px 0px 0px #00e6f6; 4 position: relative; 5 padding: 12px 35px; 6 font-size: 20px; 7 font-weight: 500; 8 color: white; 9 border: 3px solid #00e6f6; 10 border-radius: 8px; 11 box-shadow: 0 0 0 #fec1958c; 12 transition: all .3s ease-in-out; 13} 14 15.star-1 { 16 position: absolute; 17 top: 20%; 18 left: 20%; 19 width: 25px; 20 height: auto; 21 filter: drop-shadow(0 0 0 #fd1853); 22 z-index: -5; 23 transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96); 24} 25 26.star-2 { 27 position: absolute; 28 top: 45%; 29 left: 45%; 30 width: 15px; 31 height: auto; 32 filter: drop-shadow(0 0 0 #fd1853); 33 z-index: -5; 34 transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); 35} 36 37.star-3 { 38 position: absolute; 39 top: 40%; 40 left: 40%; 41 width: 5px; 42 height: auto; 43 filter: drop-shadow(0 0 0 #fd1853); 44 z-index: -5; 45 transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); 46} 47 48.star-4 { 49 position: absolute; 50 top: 20%; 51 left: 40%; 52 width: 8px; 53 height: auto; 54 filter: drop-shadow(0 0 0 #fd1853); 55 z-index: -5; 56 transition: all .8s cubic-bezier(0, 0.4, 0, 1.01); 57} 58 59.star-5 { 60 position: absolute; 61 top: 25%; 62 left: 45%; 63 width: 15px; 64 height: auto; 65 filter: drop-shadow(0 0 0 #fd1853); 66 z-index: -5; 67 transition: all .6s cubic-bezier(0, 0.4, 0, 1.01); 68} 69 70.star-6 { 71 position: absolute; 72 top: 5%; 73 left: 50%; 74 width: 5px; 75 height: auto; 76 filter: drop-shadow(0 0 0 #fd1853); 77 z-index: -5; 78 transition: all .8s ease; 79} 80 81button:hover { 82 background: transparent; 83 color: #00e6f6; 84 box-shadow: 0 0 50px #fd1853; 85} 86 87button:hover .star-1 { 88 position: absolute; 89 top: -80%; 90 left: -30%; 91 width: 25px; 92 height: auto; 93 filter: drop-shadow(0 0 10px #fd1853); 94 z-index: 2; 95} 96 97button:hover .star-2 { 98 position: absolute; 99 top: -25%; 100 left: 10%; 101 width: 15px; 102 height: auto; 103 filter: drop-shadow(0 0 10px #fd1853); 104 z-index: 2; 105} 106 107button:hover .star-3 { 108 position: absolute; 109 top: 55%; 110 left: 25%; 111 width: 5px; 112 height: auto; 113 filter: drop-shadow(0 0 10px #fd1853); 114 z-index: 2; 115} 116 117button:hover .star-4 { 118 position: absolute; 119 top: 30%; 120 left: 80%; 121 width: 8px; 122 height: auto; 123 filter: drop-shadow(0 0 10px #fd1853); 124 z-index: 2; 125} 126 127button:hover .star-5 { 128 position: absolute; 129 top: 25%; 130 left: 115%; 131 width: 15px; 132 height: auto; 133 filter: drop-shadow(0 0 10px #fd1853); 134 z-index: 2; 135} 136 137button:hover .star-6 { 138 position: absolute; 139 top: 5%; 140 left: 60%; 141 width: 5px; 142 height: auto; 143 filter: drop-shadow(0 0 10px #fd1853); 144 z-index: 2; 145} 146 147.fil0 { 148 fill: #fd1853 149}
HTML
1<button>Hover me 2 <div class="star-1"> 3 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="25" height="25"> 4 <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087 5 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 6 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 7 C475.116,213.899,475.116,136.489,427.313,88.686z"></path> 8</svg> 9 10 11 </div> 12 <div class="star-2"> 13 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="20"> 14 <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087 15 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 16 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 17 C475.116,213.899,475.116,136.489,427.313,88.686z"></path> 18</svg> 19 20 </div> 21 <div class="star-3"> 22 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="9" height="9"> 23 <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087 24 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 25 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 26 C475.116,213.899,475.116,136.489,427.313,88.686z"></path> 27</svg> 28 29 </div> 30 <div class="star-4"> 31 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="10" height="10"> 32 <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087 33 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 34 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 35 C475.116,213.899,475.116,136.489,427.313,88.686z"></path> 36</svg> 37 38 </div> 39 <div class="star-5"> 40 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20" height="20"> 41 <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087 42 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 43 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 44 C475.116,213.899,475.116,136.489,427.313,88.686z"></path> 45</svg> 46 47 </div> 48 <div class="star-6"> 49 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="7" height="7"> 50 <path fill="#fd1853" d="M427.313,88.686c-47.803-47.803-125.213-47.803-173.016,0l-17.087,17.087l-17.087-17.087 51 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 52 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 53 C475.116,213.899,475.116,136.489,427.313,88.686z"></path> 54</svg> 55 56 </div> 57</button> 58 59 60