From 55e621a45a583ca769d951ae294c4755520940a5 Mon Sep 17 00:00:00 2001
From: Naitik pitroda <pitroda.np@gmail.com>
Date: Thu, 20 Oct 2022 11:26:06 +0530
Subject: [PATCH] change of button using animation

---
 example-multipleServers-pretty.html      | 14 +++++--
 example-singleServer-customSettings.html | 50 ++++++++++++++++++++----
 example-singleServer-gauges.html         | 27 +++++++++++++
 example-singleServer-pretty.html         | 27 +++++++++++++
 example-singleServer-progressBar.html    | 27 +++++++++++++
 5 files changed, 135 insertions(+), 10 deletions(-)

diff --git a/example-multipleServers-pretty.html b/example-multipleServers-pretty.html
index 4316eabf..7579f25f 100755
--- a/example-multipleServers-pretty.html
+++ b/example-multipleServers-pretty.html
@@ -107,6 +107,7 @@
 	body{
 		text-align:center;
 		font-family:"Roboto",sans-serif;
+		
 	}
 	h1{
 		color:#404040;
@@ -149,10 +150,12 @@
 		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 @@
 	#pingText,#jitText{
 		color:#AA6060;
 	}
+	#ipArea {
+		position: relative;
+		top:1em
+		
+	}
 	div.meterText:empty:before{
 		color:#505050 !important;
 		content:"0.00";
@@ -232,8 +240,8 @@ <h1>LibreSpeed Example</h1>
 			<div class="unit">ms</div>
 		</div>
 	</div>
-	<div id="ipArea">
-		IP Address: <span id="ip"></span>
+	<div id="ipArea"><h4>IP Address:</h4>
+		 <span id="ip"></span>
 	</div>
 </div>
 <a href="https://github.com/librespeed/speedtest">Source code</a>
diff --git a/example-singleServer-customSettings.html b/example-singleServer-customSettings.html
index b1c0cfbb..f96b9558 100755
--- a/example-singleServer-customSettings.html
+++ b/example-singleServer-customSettings.html
@@ -63,20 +63,22 @@
 	#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 @@
 	#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 @@
 		height:9em;
 		position:relative;
 		box-sizing:border-box;
+		border: 3px solid black;
+		
 	}
 	div.testName{
 		position:absolute;
diff --git a/example-singleServer-gauges.html b/example-singleServer-gauges.html
index 9a49705f..1bfc895b 100755
--- a/example-singleServer-gauges.html
+++ b/example-singleServer-gauges.html
@@ -135,6 +135,33 @@
 		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);
 	}
diff --git a/example-singleServer-pretty.html b/example-singleServer-pretty.html
index 77155353..5b1fe2af 100755
--- a/example-singleServer-pretty.html
+++ b/example-singleServer-pretty.html
@@ -85,6 +85,33 @@
 	#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";
 	}
diff --git a/example-singleServer-progressBar.html b/example-singleServer-progressBar.html
index f9e7007c..024cb6ff 100755
--- a/example-singleServer-progressBar.html
+++ b/example-singleServer-progressBar.html
@@ -94,6 +94,33 @@
 		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;