12 views
CSSAdd prefixes
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
HTML
1<button> 2 <span class="box"> 3 Buy BTC 4 <div class="star-1"> 5 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>bitcoin</title><path d="M14.24 10.56C13.93 11.8 12 11.17 11.4 11L11.95 8.82C12.57 9 14.56 9.26 14.24 10.56M11.13 12.12L10.53 14.53C11.27 14.72 13.56 15.45 13.9 14.09C14.26 12.67 11.87 12.3 11.13 12.12M21.7 14.42C20.36 19.78 14.94 23.04 9.58 21.7C4.22 20.36 .963 14.94 2.3 9.58C3.64 4.22 9.06 .964 14.42 2.3C19.77 3.64 23.03 9.06 21.7 14.42M14.21 8.05L14.66 6.25L13.56 6L13.12 7.73C12.83 7.66 12.54 7.59 12.24 7.53L12.68 5.76L11.59 5.5L11.14 7.29C10.9 7.23 10.66 7.18 10.44 7.12L10.44 7.12L8.93 6.74L8.63 7.91C8.63 7.91 9.45 8.1 9.43 8.11C9.88 8.22 9.96 8.5 9.94 8.75L8.71 13.68C8.66 13.82 8.5 14 8.21 13.95C8.22 13.96 7.41 13.75 7.41 13.75L6.87 15L8.29 15.36C8.56 15.43 8.82 15.5 9.08 15.56L8.62 17.38L9.72 17.66L10.17 15.85C10.47 15.93 10.76 16 11.04 16.08L10.59 17.87L11.69 18.15L12.15 16.33C14 16.68 15.42 16.54 16 14.85C16.5 13.5 16 12.7 15 12.19C15.72 12 16.26 11.55 16.41 10.57C16.61 9.24 15.59 8.53 14.21 8.05Z"></path></svg> 6 7 8 </div> 9 <div class="star-2"> 10 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>bitcoin</title><path d="M14.24 10.56C13.93 11.8 12 11.17 11.4 11L11.95 8.82C12.57 9 14.56 9.26 14.24 10.56M11.13 12.12L10.53 14.53C11.27 14.72 13.56 15.45 13.9 14.09C14.26 12.67 11.87 12.3 11.13 12.12M21.7 14.42C20.36 19.78 14.94 23.04 9.58 21.7C4.22 20.36 .963 14.94 2.3 9.58C3.64 4.22 9.06 .964 14.42 2.3C19.77 3.64 23.03 9.06 21.7 14.42M14.21 8.05L14.66 6.25L13.56 6L13.12 7.73C12.83 7.66 12.54 7.59 12.24 7.53L12.68 5.76L11.59 5.5L11.14 7.29C10.9 7.23 10.66 7.18 10.44 7.12L10.44 7.12L8.93 6.74L8.63 7.91C8.63 7.91 9.45 8.1 9.43 8.11C9.88 8.22 9.96 8.5 9.94 8.75L8.71 13.68C8.66 13.82 8.5 14 8.21 13.95C8.22 13.96 7.41 13.75 7.41 13.75L6.87 15L8.29 15.36C8.56 15.43 8.82 15.5 9.08 15.56L8.62 17.38L9.72 17.66L10.17 15.85C10.47 15.93 10.76 16 11.04 16.08L10.59 17.87L11.69 18.15L12.15 16.33C14 16.68 15.42 16.54 16 14.85C16.5 13.5 16 12.7 15 12.19C15.72 12 16.26 11.55 16.41 10.57C16.61 9.24 15.59 8.53 14.21 8.05Z"></path></svg> 11 12 </div> 13 <div class="star-3"> 14 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>bitcoin</title><path d="M14.24 10.56C13.93 11.8 12 11.17 11.4 11L11.95 8.82C12.57 9 14.56 9.26 14.24 10.56M11.13 12.12L10.53 14.53C11.27 14.72 13.56 15.45 13.9 14.09C14.26 12.67 11.87 12.3 11.13 12.12M21.7 14.42C20.36 19.78 14.94 23.04 9.58 21.7C4.22 20.36 .963 14.94 2.3 9.58C3.64 4.22 9.06 .964 14.42 2.3C19.77 3.64 23.03 9.06 21.7 14.42M14.21 8.05L14.66 6.25L13.56 6L13.12 7.73C12.83 7.66 12.54 7.59 12.24 7.53L12.68 5.76L11.59 5.5L11.14 7.29C10.9 7.23 10.66 7.18 10.44 7.12L10.44 7.12L8.93 6.74L8.63 7.91C8.63 7.91 9.45 8.1 9.43 8.11C9.88 8.22 9.96 8.5 9.94 8.75L8.71 13.68C8.66 13.82 8.5 14 8.21 13.95C8.22 13.96 7.41 13.75 7.41 13.75L6.87 15L8.29 15.36C8.56 15.43 8.82 15.5 9.08 15.56L8.62 17.38L9.72 17.66L10.17 15.85C10.47 15.93 10.76 16 11.04 16.08L10.59 17.87L11.69 18.15L12.15 16.33C14 16.68 15.42 16.54 16 14.85C16.5 13.5 16 12.7 15 12.19C15.72 12 16.26 11.55 16.41 10.57C16.61 9.24 15.59 8.53 14.21 8.05Z"></path></svg> 15 16 </div> 17 <div class="star-4"> 18 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>bitcoin</title><path d="M14.24 10.56C13.93 11.8 12 11.17 11.4 11L11.95 8.82C12.57 9 14.56 9.26 14.24 10.56M11.13 12.12L10.53 14.53C11.27 14.72 13.56 15.45 13.9 14.09C14.26 12.67 11.87 12.3 11.13 12.12M21.7 14.42C20.36 19.78 14.94 23.04 9.58 21.7C4.22 20.36 .963 14.94 2.3 9.58C3.64 4.22 9.06 .964 14.42 2.3C19.77 3.64 23.03 9.06 21.7 14.42M14.21 8.05L14.66 6.25L13.56 6L13.12 7.73C12.83 7.66 12.54 7.59 12.24 7.53L12.68 5.76L11.59 5.5L11.14 7.29C10.9 7.23 10.66 7.18 10.44 7.12L10.44 7.12L8.93 6.74L8.63 7.91C8.63 7.91 9.45 8.1 9.43 8.11C9.88 8.22 9.96 8.5 9.94 8.75L8.71 13.68C8.66 13.82 8.5 14 8.21 13.95C8.22 13.96 7.41 13.75 7.41 13.75L6.87 15L8.29 15.36C8.56 15.43 8.82 15.5 9.08 15.56L8.62 17.38L9.72 17.66L10.17 15.85C10.47 15.93 10.76 16 11.04 16.08L10.59 17.87L11.69 18.15L12.15 16.33C14 16.68 15.42 16.54 16 14.85C16.5 13.5 16 12.7 15 12.19C15.72 12 16.26 11.55 16.41 10.57C16.61 9.24 15.59 8.53 14.21 8.05Z"></path></svg> 19 20 </div> 21 <div class="star-5"> 22 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>bitcoin</title><path d="M14.24 10.56C13.93 11.8 12 11.17 11.4 11L11.95 8.82C12.57 9 14.56 9.26 14.24 10.56M11.13 12.12L10.53 14.53C11.27 14.72 13.56 15.45 13.9 14.09C14.26 12.67 11.87 12.3 11.13 12.12M21.7 14.42C20.36 19.78 14.94 23.04 9.58 21.7C4.22 20.36 .963 14.94 2.3 9.58C3.64 4.22 9.06 .964 14.42 2.3C19.77 3.64 23.03 9.06 21.7 14.42M14.21 8.05L14.66 6.25L13.56 6L13.12 7.73C12.83 7.66 12.54 7.59 12.24 7.53L12.68 5.76L11.59 5.5L11.14 7.29C10.9 7.23 10.66 7.18 10.44 7.12L10.44 7.12L8.93 6.74L8.63 7.91C8.63 7.91 9.45 8.1 9.43 8.11C9.88 8.22 9.96 8.5 9.94 8.75L8.71 13.68C8.66 13.82 8.5 14 8.21 13.95C8.22 13.96 7.41 13.75 7.41 13.75L6.87 15L8.29 15.36C8.56 15.43 8.82 15.5 9.08 15.56L8.62 17.38L9.72 17.66L10.17 15.85C10.47 15.93 10.76 16 11.04 16.08L10.59 17.87L11.69 18.15L12.15 16.33C14 16.68 15.42 16.54 16 14.85C16.5 13.5 16 12.7 15 12.19C15.72 12 16.26 11.55 16.41 10.57C16.61 9.24 15.59 8.53 14.21 8.05Z"></path></svg> 23 24 </div> 25 <div class="star-6"> 26 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>bitcoin</title><path d="M14.24 10.56C13.93 11.8 12 11.17 11.4 11L11.95 8.82C12.57 9 14.56 9.26 14.24 10.56M11.13 12.12L10.53 14.53C11.27 14.72 13.56 15.45 13.9 14.09C14.26 12.67 11.87 12.3 11.13 12.12M21.7 14.42C20.36 19.78 14.94 23.04 9.58 21.7C4.22 20.36 .963 14.94 2.3 9.58C3.64 4.22 9.06 .964 14.42 2.3C19.77 3.64 23.03 9.06 21.7 14.42M14.21 8.05L14.66 6.25L13.56 6L13.12 7.73C12.83 7.66 12.54 7.59 12.24 7.53L12.68 5.76L11.59 5.5L11.14 7.29C10.9 7.23 10.66 7.18 10.44 7.12L10.44 7.12L8.93 6.74L8.63 7.91C8.63 7.91 9.45 8.1 9.43 8.11C9.88 8.22 9.96 8.5 9.94 8.75L8.71 13.68C8.66 13.82 8.5 14 8.21 13.95C8.22 13.96 7.41 13.75 7.41 13.75L6.87 15L8.29 15.36C8.56 15.43 8.82 15.5 9.08 15.56L8.62 17.38L9.72 17.66L10.17 15.85C10.47 15.93 10.76 16 11.04 16.08L10.59 17.87L11.69 18.15L12.15 16.33C14 16.68 15.42 16.54 16 14.85C16.5 13.5 16 12.7 15 12.19C15.72 12 16.26 11.55 16.41 10.57C16.61 9.24 15.59 8.53 14.21 8.05Z"></path></svg> 27 28 </div> 29 </span> 30</button> 31 32 33