神奇的CSS3按鈕特效
阿新 • • 發佈：2019-01-18
1 <!doctype html> 2 <html> 3 4 <!-- author: @simurai --> 5 6 <head> 7 <title>CSS3神奇的按鈕-柯樂義</title> 8 <meta charset="utf-8"> 9 <style> 10 11 12 /* This is just the basic styling for the whole page. */ 13 14 /* Global ------------------------------------------------------*/ 15 16 html { 17 font: 62.5%/1 "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif; 18 background-color: hsl(200,5%,15%); 19 background-size: 5px 5px; 20 background-image: -webkit-linear-gradient( 45deg, hsla(0,0%,0%,0) 0px, 21 hsla(0,0%,0%,.10) 50%, 22 hsla(0,0%,0%,0) 100% ); 23} 24 25 body { 26 margin: 0; 27 } 28 29 30 31 /* list ------------------------------------------------------ */ 32 33 ul { 34 list-style: none; 35 padding: 50px 0; 36 margin: 0; 37 font-size: 2em; 38 text-align: center; 39 background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,100%,0) 0px,40 hsla(0,0%,100%,.09) 50%, 41 hsla(0,0%,100%,0) 100% ); 42 43 } 44 45 ul li { 46 padding: 50px 0; 47 } 48 49 50 51 /* Aside ------------------------------------------------------ */ 52 53 aside { 54 position: fixed; 55 top: 20px; 56 left: 20px; 57 } 58 59 aside button { 60 margin: 0; 61 padding: 10px ; 62 border: none; 63 border-radius: 5px; 64 font-weight: bold; 65 color: hsl(200,100%,60%); 66 background: hsla(0,0%,0%,.12); 67 cursor: pointer; 68 } 69 70 aside button:hover { 71 background: hsla(0,0%,0%,.2); 72 } 73 74 aside button:active { 75 -webkit-transform: translateY(1px); 76 } 77 78 /* 79 * umbrUI meter input by @simurai 80 */ 81 82 83 84 /* -------------- meter -------------- */ 85 86 meter:nth-child(1) { -webkit-transform: translate(-50px, 50px) rotate(-90deg); } 87 meter:nth-child(2) { -webkit-transform: translate( -25px, 25px) rotate(-90deg); } 88 meter:nth-child(3) { -webkit-transform: translate( 0px, 0px) rotate(-90deg); } 89 meter:nth-child(4) { -webkit-transform: translate( 25px, -25px) rotate(-90deg); } 90 meter:nth-child(5) { -webkit-transform: translate( 50px, -50px) rotate(-90deg); } 91 92 93 meter { 94 -webkit-appearance: none; 95 position: relative; 96 display: block; 97 margin: 8px auto; 98 width: 100px; 99 height: 17px; 100 border-radius: 5px; 101 padding: 4px 5px 4px 5px; 102 box-sizing: border-box; 103 background: #000; 104 -webkit-box-shadow: -1px 0 0 hsla(0,0%,100%,.08); 105 -webkit-transform-origin: center 8px; 106 } 107 108 109 meter::-webkit-meter-bar { 110 background-color: hsl(200,10%,14%); 111 background-size: 2px 5px; 112 background-image: -webkit-linear-gradient( 0deg, hsla(0,0%,0%,.4) 1px, hsla(0,0%,0%,0) 1px ), 113 -webkit-linear-gradient( 90deg, hsla(0,0%,0%,1) 1px, hsla(0,0%,0%,0) 1px ); 114 } 115 116 117 meter::-webkit-meter-optimum-value, 118 meter::-webkit-meter-suboptimum-value, 119 meter::-webkit-meter-even-less-good-value { 120 background-size: inherit; 121 background-image: inherit; 122 -webkit-box-shadow: 0 0 10px 2px hsla(200,100%,50%,.4); 123 -webkit-transition: width 1s cubic-bezier(.20, .10, .20, 1); 124 } 125 126 127 /* With these pseudo selectors you could change the colors when changing the value. */ 128 meter::-webkit-meter-optimum-value { background-color: hsl(200,100%,50%); } 129 meter::-webkit-meter-suboptimum-value { background-color: hsl(200,100%,50%); } 130 meter::-webkit-meter-even-less-good-value { background-color: hsl(200,100%,50%); } 131 132 133 meter:hover::-webkit-meter-optimum-value, 134 meter:hover::-webkit-meter-suboptimum-value, 135 meter:hover::-webkit-meter-even-less-good-value { 136 /*In the real world, just change the element's value, this is just a hack for this demo.*/ 137 width: 100% !important; 138 -webkit-transition: width .3s cubic-bezier(.20, .10, .20, 1); 139 } 140 141 142 /* 143 * umbrUI range slider by @simurai 144 */ 145 146 147 /* -------------- Range Slider -------------- */ 148 149 input[type="range"] { 150 -webkit-appearance: none; /* Remove Safari default */ 151 outline: none; 152 width: 250px; 153 height: 5px; 154 border-radius: 1px; 155 position: relative; 156 157 158 background-color: #000; 159 160 -webkit-background-clip: padding-box; 161 border: 0; 162 border-bottom: 1px solid rgba(255,255,255,0.1); 163 cursor: ew-resize; 164 } 165 166 input[type="range"]::-webkit-slider-thumb { 167 -webkit-appearance: none; /* Remove Safari default */ 168 position: relative; 169 z-index: 1; 170 171 width: 26px; 172 height: 40px; 173 border-radius: 3px / 6px ; 174 175 background-image: -webkit-gradient( linear, left top, right top, 176 color-stop( 0, hsl(0,0%,15%) ), 177 color-stop( .16, hsl(0,0%,22%) ), 178 color-stop( .18, hsl(0,0%,30%) ), 179 color-stop( .2, hsl(0,0%,26%) ), 180 181 color-stop( .42, hsl(200,60%,30%) ), 182 color-stop( .44, hsl(200,0%,15%) ), 183 color-stop( .46, hsl(200,100%,50%) ), 184 color-stop( .54, hsl(200,100%,50%) ), 185 color-stop( .56, hsl(200,0%,15%) ), 186 color-stop( .58, hsl(200,60%,30%) ), 187 188 color-stop( .8, hsl(0,0%,26%) ), 189 color-stop( .82, hsl(0,0%,30%) ), 190 color-stop( .84, hsl(0,0%,22%) ), 191 color-stop( 1, hsl(0,0%,15%) ) 192 ); 193 194 -webkit-box-shadow: 195 196 inset hsla(0,0%,100%,.15) 0 1px 0px, 197 198 hsl(0,0%,17%) 0 2px 0px, 199 hsl(0,0%,15%) 0 4px 0px, 200 hsl(0,0%,13%) 0 6px 0px, 201 202 rgba(0,0,0,.5) 0 8px 5px; 203 204 -webkit-transform: translateY(-3px); 205 -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, 206 from(transparent), color-stop(0.6, transparent), to( rgba(255,255,255,0.15) )); 207 } 208 209 input[type="range"]:hover { 210 211 background-image: -webkit-gradient( linear, left top, right top, 212 color-stop( 0, hsl(200,80%,45%) ), 213 color-stop( .08, hsl(200,80%,15%) ), 214 color-stop( .5, hsl(200,80%,0%) ), 215 color-stop( .92, hsl(200,80%,15%) ), 216 color-stop( 1, hsl(200,80%,45%) ) 217 ); 218 219 -webkit-box-shadow: inset #000 1px 1px 1px, inset #000 -1px -1px 1px; 220 221 } 222 223 224 225 /* 226 * umbrUI checkboxes by @simurai 227 * Usage: <input type="checkbox" data-icon1="P" data-icon2="v" /> 228 */ 229 230 231 /* ----------- Checkbox */ 232 233 234 input[type="checkbox"] { 235 -webkit-appearance:none; /* Remove Safari default */ 236 outline: none; 237 width: 120px; 238 height: 40px; 239 240 position: relative; 241 border-radius: 6px; 242 background-color: #000; 243 -webkit-background-clip: padding-box; 244 245 border: 0; 246 border-bottom: 1px solid transparent; 247 -webkit-perspective: 200; 248 } 249 250 input[type="checkbox"]:before, input[type="checkbox"]:after { 251 font: bold 22px/32px sans-serif; 252 253 text-align: center; 254 255 position: absolute; 256 z-index: 1; 257 258 width: 56px; 259 height: 30px; 260 top: 4px; 261 262 border: 0; 263 border-top: 1px solid rgba(255,255,255,0.15); 264 } 265 266 input[type="checkbox"]:before { 267 content: attr(data-icon1); 268 left: 4px; 269 border-radius: 3px 0 0 3px; 270 271 } 272 273 input[type="checkbox"]:after { 274 content: attr(data-icon2); 275 right: 4px; 276 border-radius: 0 3px 3px 0; 277 } 278 279 280 /* ----------- checked/unchecked */ 281 282 /* unchecked */ 283 input[type="checkbox"] { 284 -webkit-border-image: -webkit-gradient(linear, 100% 0%, 0% 0%, 285 from(rgba(255,255,255,0)), to(rgba(255,255,255,0)), 286 color-stop(.1,rgba(255,255,255,.05)), 287 color-stop(.3,rgba(5,137,200,0.4)), 288 color-stop(.45,rgba(255,255,255,.05)), 289 color-stop(.9,rgba(255,255,255,.1)) 290 )100% 100%; 291 292 background-image: -webkit-gradient( 293 linear, right top, left top, 294 color-stop( 0, hsl(0,0%,0%) ), 295 color-stop( 0.14, hsl(0,0%,50%) ), 296 color-stop( 0.15, hsl(0,0%,0%) ) 297 ); 298 -webkit-box-shadow: inset #000 -7px 0 1px, inset #000 0 -5px 10px, inset #000 0 3px 3px; 299 } 300 input[type="checkbox"]:after { 301 background-image: -webkit-gradient(linear, 70% top, 40% bottom, 302 from( hsl(0,0%,17%) ),to( hsl(0,0%,12%) ) 303 ); 304 border-right: 1px solid transparent; 305 -webkit-border-image: -webkit-gradient(linear, left bottom, left top, 306 from(rgba(255,255,255,0)), 307 color-stop(.2,rgba(255,255,255,0)), 308 color-stop(.4,rgba(255,255,255,.5)), 309 to(rgba(255,255,255,.05)) 310 )10% 100%; 311 312 -webkit-box-shadow: rgba(0,0,0,.6) 8px 3px 10px; 313 -webkit-transform: rotateY(-30deg) scaleX(.9) scaleY(1.1) translateX(-8px); 314 } 315 316 317 /* checked */ 318 input[type="checkbox"]:checked { 319 -webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%, 320 from(rgba(255,255,255,0)), to(rgba(255,255,255,0)), 321 color-stop(.1,rgba(255,255,255,.05)), 322 color-stop(.3,rgba(5,137,200,0.4)), 323 color-stop(.45,rgba(255,255,255,.05)), 324 color-stop(.9,rgba(255,255,255,.1)) 325 )100% 100%; 326 327 background-image: -webkit-gradient( 328 linear, left top, right top, 329 color-stop( 0, hsl(0,0%,0%) ), 330 color-stop( 0.14, hsl(0,0%,50%) ), 331 color-stop( 0.15, hsl(0,0%,0%) ) 332 ); 333 -webkit-box-shadow: inset #000 7px 0 1px, inset #000 0 -5px 10px, inset #000 0 3px 3px; 334 }