This post is saved as a draft.
#212121
1button { 2 background: linear-gradient(30deg, #000 35%, #ea8b19 73%); 3 position: relative; 4 padding: 17px 45px; 5 font-size: 20px; 6 font-weight: 500; 7 color: white; 8 border: 3px solid #ea8b19; 9 border-radius: 8px; 10 transition: all .3s ease-in-out; 11} 12 13.star-1 { 14 position: absolute; 15 fill: #ea8b19; 16 top: 20%; 17 left: 20%; 18 width: 25px; 19 height: auto; 20 filter: drop-shadow(0 0 0 #ea8b19); 21 z-index: -5; 22 transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96); 23} 24 25.star-2 { 26 position: absolute; 27 fill: #ea8b19; 28 top: 45%; 29 left: 45%; 30 width: 15px; 31 height: auto; 32 filter: drop-shadow(0 0 0 #ea8b19); 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 fill: #ea8b19; 40 top: 40%; 41 left: 40%; 42 width: 5px; 43 height: auto; 44 filter: drop-shadow(0 0 0 #ea8b19); 45 z-index: -5; 46 transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); 47} 48 49.star-4 { 50 position: absolute; 51 fill: #ea8b19; 52 top: 20%; 53 left: 40%; 54 width: 8px; 55 height: auto; 56 filter: drop-shadow(0 0 0 #ea8b19); 57 z-index: -5; 58 transition: all .8s cubic-bezier(0, 0.4, 0, 1.01); 59} 60 61.star-5 { 62 position: absolute; 63 fill: #ea8b19; 64 top: 25%; 65 left: 45%; 66 width: 15px; 67 height: auto; 68 filter: drop-shadow(0 0 0 #ea8b19); 69 z-index: -5; 70 transition: all .6s cubic-bezier(0, 0.4, 0, 1.01); 71} 72 73.star-6 { 74 position: absolute; 75 fill: #ea8b19; 76 top: 5%; 77 left: 50%; 78 width: 5px; 79 height: auto; 80 filter: drop-shadow(0 0 0 #ea8b19); 81 z-index: -5; 82 transition: all .8s ease; 83} 84 85button:hover { 86 background: #000; 87 color: #ea8b19; 88 box-shadow: 0 0 50px #ea8b19; 89} 90 91button:hover .star-1 { 92 position: absolute; 93 top: -110%; 94 left: -60%; 95 width: 30px; 96 height: auto; 97 filter: drop-shadow(0 0 10px #ea8b19); 98 z-index: 2; 99} 100 101button:hover .star-2 { 102 position: absolute; 103 top: -45%; 104 left: 0%; 105 width: 20px; 106 height: auto; 107 filter: drop-shadow(0 0 10px #ea8b19); 108 z-index: 2; 109} 110 111button:hover .star-3 { 112 position: absolute; 113 top: 55%; 114 left: 15%; 115 width: 11px; 116 height: auto; 117 filter: drop-shadow(0 0 10px #ea8b19); 118 z-index: 2; 119} 120 121button:hover .star-4 { 122 position: absolute; 123 top: 45%; 124 left: 85%; 125 width: 15px; 126 height: auto; 127 filter: drop-shadow(0 0 10px #ea8b19); 128 z-index: 2; 129} 130 131button:hover .star-5 { 132 position: absolute; 133 top: 25%; 134 left: 140%; 135 width: 25px; 136 height: auto; 137 filter: drop-shadow(0 0 10px #ea8b19); 138 z-index: 2; 139} 140 141button:hover .star-6 { 142 position: absolute; 143 top: -5%; 144 left: 60%; 145 width: 15px; 146 height: auto; 147 filter: drop-shadow(0 0 10px #ea8b19); 148 z-index: 2; 149} 150 151.fil0 { 152 fill: #ea8b19; 153} 154 155.box { 156 width: 120px; 157 height: 45px; 158 float: left; 159 transition: .5s linear; 160 position: relative; 161 display: block; 162 padding: 8px; 163 margin: -10px -15.5px; 164 background: transparent; 165 text-transform: uppercase; 166 font-weight: 900; 167} 168 169.box:hover { 170 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); 171 cursor: pointer; 172 color: white; 173 background: black; 174} 175 176.box:hover:before { 177 border-color: #fff; 178 height: 100%; 179 transform: translateX(0); 180 transition: .3s transform linear, .3s height linear .3s; 181} 182 183.box:hover:after { 184 border-color: #ea8b19; 185 height: 100%; 186 transform: translateX(0); 187 transition: .3s transform linear, .3s height linear .5s; 188} 189 190.box:before { 191 position: absolute; 192 content: ''; 193 left: 0; 194 bottom: 0; 195 height: 4px; 196 width: 100%; 197 border-bottom: 4px solid transparent; 198 border-left: 4px solid transparent; 199 box-sizing: border-box; 200 transform: translateX(100%); 201} 202 203.box:after { 204 position: absolute; 205 content: ''; 206 top: 0; 207 left: 0; 208 width: 100%; 209 height: 4px; 210 border-top: 4px solid transparent; 211 border-right: 4px solid transparent; 212 box-sizing: border-box; 213 transform: translateX(-100%); 214} 215
Variation of abutton
Variation of abutton