Add visual feedback to control buttons in design

13 years ago · 7efd395cc1
parent 641b4b90ed
commit 7efd395cc1
2 changed files with 14 additions and 6 deletions
--- a/design/css/cvm.css
+++ b/design/css/cvm.css
@ -236,6 +236,13 @@ table.vpsinfo td
 	background-color: #CDD0E1;
 }

+.controlbutton.disabled, .constrolbutton.disabled:hover
+{
+	border: 2px solid #737379;
+	background-color: #9B9B9B;
+	cursor: default;
+}
+
 .online
 {
 	color: #078812;
--- a/design/index.html
+++ b/design/index.html
@ -4,6 +4,7 @@
 		<title>CVM</title>
 		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
 		<link rel="stylesheet" href="css/cvm.css" type="text/css">
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 		<script type="text/javascript" src="js/cvm.js"></script>
 	</head>
 	<body>
@ -51,16 +52,16 @@
 				</div>
 				
 				<div class="controlbox">
-					<a class="controlbutton" href="#">
-						<img src="images/button_start.png">
+					<a class="controlbutton button-loader" href="#">
+						<img src="images/button_start.png" class="button-icon">
 						Start VPS
 					</a>
-					<a class="controlbutton" href="#">
-						<img src="images/button_restart.png">
+					<a class="controlbutton button-loader" href="#">
+						<img src="images/button_restart.png" class="button-icon">
 						Restart VPS
 					</a>
-					<a class="controlbutton last" href="#">
-						<img src="images/button_stop.png">
+					<a class="controlbutton button-loader last" href="#">
+						<img src="images/button_stop.png" class="button-icon">
 						Stop VPS
 					</a>
 					<div class="clear"></div>