#buttonsgeneral { font-family: arial; color: #FFFFFF !important; font-size: 14px; text-shadow: 1px 1px 0px #7CACDE; box-shadow: 1px 1px 2px #BEE2F9; padding: 10px 25px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 2px solid #3866A3; background: #63B8EE; background: linear-gradient(top, #63B8EE, #468CCF); background: -ms-linear-gradient(top, #63B8EE, #468CCF); background: -webkit-gradient(linear, left top, left bottom, from(#63B8EE), to(#468CCF)); background: -moz-linear-gradient(top, #63B8EE, #468CCF); } #buttonsgeneral:hover { color: #14396A !important; background: #468CCF; background: linear-gradient(top, #468CCF, #63B8EE); background: -ms-linear-gradient(top, #468CCF, #63B8EE); background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE)); background: -moz-linear-gradient(top, #468CCF, #63B8EE); } #MMbtnStart { font-family: arial; color: #FFFFFF !important; font-size: 14px; text-shadow: 1px 1px 0px #7CACDE; box-shadow: 1px 1px 2px #BEE2F9; padding: 10px 25px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 2px solid #3866A3; background: #63B8EE; background: linear-gradient(top, #63B8EE, #468CCF); background: -ms-linear-gradient(top, #63B8EE, #468CCF); background: -webkit-gradient(linear, left top, left bottom, from(#63B8EE), to(#468CCF)); background: -moz-linear-gradient(top, #63B8EE, #468CCF); } #MMbtnStart:hover { color: #14396A !important; background: #468CCF; background: linear-gradient(top, #468CCF, #63B8EE); background: -ms-linear-gradient(top, #468CCF, #63B8EE); background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE)); background: -moz-linear-gradient(top, #468CCF, #63B8EE); } #MMbtnQuit { font-family: arial; color: #FFFFFF !important; font-size: 14px; text-shadow: 1px 1px 0px #7CACDE; box-shadow: 1px 1px 2px #BEE2F9; padding: 10px 25px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 2px solid #3866A3; background: #63B8EE; background: linear-gradient(top, #63B8EE, #468CCF); background: -ms-linear-gradient(top, #63B8EE, #468CCF); background: -webkit-gradient(linear, left top, left bottom, from(#63B8EE), to(#468CCF)); background: -moz-linear-gradient(top, #63B8EE, #468CCF); } #MMbtnQuit:hover { color: #14396A !important; background: #468CCF; background: linear-gradient(top, #468CCF, #63B8EE); background: -ms-linear-gradient(top, #468CCF, #63B8EE); background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE)); background: -moz-linear-gradient(top, #468CCF, #63B8EE); } #GOSbtnRetry { font-family: arial; color: #FFFFFF !important; font-size: 14px; text-shadow: 1px 1px 0px #7CACDE; box-shadow: 1px 1px 2px #BEE2F9; padding: 10px 25px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 2px solid #3866A3; background: #63B8EE; background: linear-gradient(top, #63B8EE, #468CCF); background: -ms-linear-gradient(top, #63B8EE, #468CCF); background: -webkit-gradient(linear, left top, left bottom, from(#63B8EE), to(#468CCF)); background: -moz-linear-gradient(top, #63B8EE, #468CCF); } #GOSbtnRetry:hover { color: #14396A !important; background: #468CCF; background: linear-gradient(top, #468CCF, #63B8EE); background: -ms-linear-gradient(top, #468CCF, #63B8EE); background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE)); background: -moz-linear-gradient(top, #468CCF, #63B8EE); } #GOSbtnQuit { font-family: arial; color: #FFFFFF !important; font-size: 14px; text-shadow: 1px 1px 0px #7CACDE; box-shadow: 1px 1px 2px #BEE2F9; padding: 10px 25px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 2px solid #3866A3; background: #63B8EE; background: linear-gradient(top, #63B8EE, #468CCF); background: -ms-linear-gradient(top, #63B8EE, #468CCF); background: -webkit-gradient(linear, left top, left bottom, from(#63B8EE), to(#468CCF)); background: -moz-linear-gradient(top, #63B8EE, #468CCF); } #GOSbtnQuit:hover { color: #14396A !important; background: #468CCF; background: linear-gradient(top, #468CCF, #63B8EE); background: -ms-linear-gradient(top, #468CCF, #63B8EE); background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE)); background: -moz-linear-gradient(top, #468CCF, #63B8EE); } #ENDbtnRestart { font-family: arial; color: #FFFFFF !important; font-size: 14px; text-shadow: 1px 1px 0px #7CACDE; box-shadow: 1px 1px 2px #BEE2F9; padding: 10px 25px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 2px solid #3866A3; background: #63B8EE; background: linear-gradient(top, #63B8EE, #468CCF); background: -ms-linear-gradient(top, #63B8EE, #468CCF); background: -webkit-gradient(linear, left top, left bottom, from(#63B8EE), to(#468CCF)); background: -moz-linear-gradient(top, #63B8EE, #468CCF); } #ENDbtnRestart:hover { color: #14396A !important; background: #468CCF; background: linear-gradient(top, #468CCF, #63B8EE); background: -ms-linear-gradient(top, #468CCF, #63B8EE); background: -webkit-gradient(linear, left top, left bottom, from(#468CCF), to(#63B8EE)); background: -moz-linear-gradient(top, #468CCF, #63B8EE); } input[type=range] { height: 26px; -webkit-appearance: none; margin: 10px 0; width: 100%; background: transparent; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 14px; cursor: pointer; animate: 0.2s; box-shadow: 1px 1px 1px #50555C; background: #50555C; border-radius: 14px; border: 0px solid #000000; } input[type=range]::-webkit-slider-thumb { box-shadow: 0px 0px 0px #000000; border: 0px solid #000000; height: 20px; width: 40px; border-radius: 12px; background: #529DE1; cursor: pointer; -webkit-appearance: none; margin-top: -3px; } input[type=range]:focus::-webkit-slider-runnable-track { background: #50555C; } input[type=range]::-moz-range-track { width: 100%; height: 14px; cursor: pointer; animate: 0.2s; box-shadow: 1px 1px 1px #50555C; background: #50555C; border-radius: 14px; border: 0px solid #000000; } input[type=range]::-moz-range-thumb { box-shadow: 0px 0px 0px #000000; border: 0px solid #000000; height: 20px; width: 40px; border-radius: 12px; background: #529DE1; cursor: pointer; } input[type=range]::-ms-track { width: 100%; height: 14px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; color: transparent; } input[type=range]::-ms-fill-lower { background: #50555C; border: 0px solid #000000; border-radius: 28px; box-shadow: 1px 1px 1px #50555C; } input[type=range]::-ms-fill-upper { background: #50555C; border: 0px solid #000000; border-radius: 28px; box-shadow: 1px 1px 1px #50555C; } input[type=range]::-ms-thumb { margin-top: 1px; box-shadow: 0px 0px 0px #000000; border: 0px solid #000000; height: 20px; width: 40px; border-radius: 12px; background: #529DE1; cursor: pointer; } input[type=range]:focus::-ms-fill-lower { background: #50555C; } input[type=range]:focus::-ms-fill-upper { background: #50555C; } #PreloaderBar { width: 256px; height: 14px; margin: 50px auto; display: block; /* Important Thing */ -webkit-appearance: none; border: none; } /* All good till now. Now we'll style the background */ #PreloaderBar::-webkit-progress-bar { background: black; border-radius: 50px; padding: 2px; box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2); } /* Now the value part */ #PreloaderBar::-webkit-progress-value { border-radius: 50px; box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4); background: -webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(left, #fefefe, #0000ff); /* Looks great, now animating it */ background-size: 25px 14px, 100% 100%, 100% 100%; -webkit-animation: move 5s linear 0 infinite; } /* That's it! Now let's try creating a new stripe pattern and animate it using animation and keyframes properties */ @-webkit-keyframes move { 0% {background-position: 0px 0px, 0 0, 0 0} 100% {background-position: -100px 0px, 0 0, 0 0} }