Button by opMorn
#e8e8e8
1button { 2 position: relative; 3 padding: 12px 35px; 4 background: #4c83fa; 5 font-size: 17px; 6 font-weight: 1000; 7 color: #ffffff; 8 border: 3px solid #4c83fa; 9 border-radius: 8px; 10 box-shadow: 0 0 0 #ffffff; 11 transition: all 0.3s ease-in-out; 12 cursor: pointer; 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 #4c83fa); 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 #4c83fa); 33 z-index: -5; 34 transition: all 1scubic-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 #4c83fa); 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 #4c83fa); 55 z-index: -5; 56 transition: all 0.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 #4c83fa); 66 z-index: -5; 67 transition: all 0.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 #4c83fa); 77 z-index: -5; 78 transition: all 0.8s ease; 79} 80 81button:hover { 82 background: transparent; 83 color: #4c83fa; 84 box-shadow: 0 0 0px #4c83fa; 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 0px #4c83fa); 94 z-index: 2; 95} 96 97button:hover .star-2 { 98 position: absolute; 99 top: -0%; 100 left: 10%; 101 width: 15px; 102 height: auto; 103 filter: drop-shadow(0 0 0px #4c83fa); 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 0px #4c83fa); 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 0px #4c83fa); 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 0px #4c83fa); 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 0px #4c83fa); 144 z-index: 2; 145} 146 147.fil0 { 148 fill: #4c83fa; 149} 150
483 views
Variation of abutton
MIT License