change of button using animation

example-multipleServers-pretty.html

@@ -107,6 +107,7 @@ function I(id){return document.getElementById(id);}
 	body{
 		text-align:center;
 		font-family:"Roboto",sans-serif;
+		
 	}
 	h1{
 		color:#404040;
@@ -149,10 +150,12 @@ function I(id){return document.getElementById(id);}
 		height:9em;
 		position:relative;
 		box-sizing:border-box;
+		border: 2px solid black;
 	}
 	div.testName{
 		position:absolute;
-		top:0.1em; left:0;
+		top:0.4em; left:0;
+		
 		width:100%;
 		font-size:1.4em;
 		z-index:9;
@@ -173,6 +176,11 @@ function I(id){return document.getElementById(id);}
 	#pingText,#jitText{
 		color:#AA6060;
 	}
+	#ipArea {
+		position: relative;
+		top:1em
+		
+	}
 	div.meterText:empty:before{
 		color:#505050 !important;
 		content:"0.00";
@@ -232,8 +240,8 @@ function I(id){return document.getElementById(id);}
 			<div class="unit">ms</div>
 		</div>
 	</div>
-	<div id="ipArea">
+	<div id="ipArea"><h4>IP Address:</h4>
-		IP Address: <span id="ip"></span>
+		 <span id="ip"></span>
 	</div>
 </div>
 <a href="https://github.com/librespeed/speedtest">Source code</a>

example-singleServer-customSettings.html

@@ -63,20 +63,22 @@ function I(id){return document.getElementById(id);}
 	#startStopBtn{
 		display:inline-block;
 		margin:0 auto;
-		color:#6060AA;
+		
-		background-color:rgba(0,0,0,0);
+		background-color:rgba(87, 28, 28, 0);
 		border:0.15em solid #6060FF;
 		border-radius:0.3em;
-		transition:all 0.3s;
+		
 		box-sizing:border-box;
 		width:8em; height:3em;
 		line-height:2.7em;
+		
+	
 		cursor:pointer;
-		box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
+		
-	}
-	#startStopBtn:hover{
-		box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
 	}
+	
+
+	
 	#startStopBtn.running{
 		background-color:#FF3030;
 		border-color:#FF6060;
@@ -88,6 +90,38 @@ function I(id){return document.getElementById(id);}
 	#startStopBtn.running:before{
 		content:"Abort";
 	}
+	#startStopBtn:hover, .testArea:hover{
+		background-image:     linear-gradient(
+		   to right, 
+		   #E7484F,
+		   #E7484F 16.65%,
+		   #F68B1D 16.65%,
+		   #F68B1D 33.3%,
+		   #FCED00 33.3%,
+		   #FCED00 49.95%,
+		   #009E4F 49.95%,
+		   #009E4F 66.6%,
+		   #00AAC3 66.6%,
+		   #00AAC3 83.25%,
+		   #732982 83.25%,
+		   #732982 100%,
+		   #E7484F 100%
+		  
+		  
+		  
+		 );
+	   animation:slidebg 2s linear infinite;
+	 }
+	 @keyframes slidebg {
+		to {
+		  background-position:20vw;
+		}
+	  }
+	  
+	  
+	  
+
+
 	#test{
 		margin-top:2em;
 		margin-bottom:12em;
@@ -98,6 +132,8 @@ function I(id){return document.getElementById(id);}
 		height:9em;
 		position:relative;
 		box-sizing:border-box;
+		border: 3px solid black;
+		
 	}
 	div.testName{
 		position:absolute;

example-singleServer-gauges.html

@@ -135,6 +135,33 @@ function initUI(){
 		cursor:pointer;
 		box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
 	}
+	#startStopBtn:hover{
+		background-image:     linear-gradient(
+		   to right, 
+		   #E7484F,
+		   #E7484F 16.65%,
+		   #F68B1D 16.65%,
+		   #F68B1D 33.3%,
+		   #FCED00 33.3%,
+		   #FCED00 49.95%,
+		   #009E4F 49.95%,
+		   #009E4F 66.6%,
+		   #00AAC3 66.6%,
+		   #00AAC3 83.25%,
+		   #732982 83.25%,
+		   #732982 100%,
+		   #E7484F 100%
+		  
+		  
+		  
+		 );
+	   animation:slidebg 2s linear infinite;
+	 }
+	 @keyframes slidebg {
+		to {
+		  background-position:20vw;
+		}
+	  }
 	#startStopBtn:hover{
 		box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
 	}

example-singleServer-pretty.html

@@ -85,6 +85,33 @@ function I(id){return document.getElementById(id);}
 	#startStopBtn:before{
 		content:"Start";
 	}
+	#startStopBtn:hover, .testArea:hover{
+		background-image:     linear-gradient(
+		   to right, 
+		   #E7484F,
+		   #E7484F 16.65%,
+		   #F68B1D 16.65%,
+		   #F68B1D 33.3%,
+		   #FCED00 33.3%,
+		   #FCED00 49.95%,
+		   #009E4F 49.95%,
+		   #009E4F 66.6%,
+		   #00AAC3 66.6%,
+		   #00AAC3 83.25%,
+		   #732982 83.25%,
+		   #732982 100%,
+		   #E7484F 100%
+		  
+		  
+		  
+		 );
+	   animation:slidebg 2s linear infinite;
+	 }
+	 @keyframes slidebg {
+		to {
+		  background-position:20vw;
+		}
+	  }
 	#startStopBtn.running:before{
 		content:"Abort";
 	}

example-singleServer-progressBar.html

@@ -94,6 +94,33 @@ function I(id){return document.getElementById(id);}
 		margin-top:2em;
 		margin-bottom:12em;
 	}
+	#startStopBtn:hover, .testArea:hover{
+		background-image:     linear-gradient(
+		   to right, 
+		   #E7484F,
+		   #E7484F 16.65%,
+		   #F68B1D 16.65%,
+		   #F68B1D 33.3%,
+		   #FCED00 33.3%,
+		   #FCED00 49.95%,
+		   #009E4F 49.95%,
+		   #009E4F 66.6%,
+		   #00AAC3 66.6%,
+		   #00AAC3 83.25%,
+		   #732982 83.25%,
+		   #732982 100%,
+		   #E7484F 100%
+		  
+		  
+		  
+		 );
+	   animation:slidebg 2s linear infinite;
+	 }
+	 @keyframes slidebg {
+		to {
+		  background-position:20vw;
+		}
+	  }
 	div.testArea{
 		display:inline-block;
 		width:14em;