Improve style of buttons

Author: lovasoa

GUI/demo.css

@@ -18,19 +18,23 @@ h1 {
 	margin: 0 0 30px;
 }
 
-button {
+.button {
+	color: #333;
 	background: linear-gradient(#eee, #ddd);
 	border: 1px solid #222;
 	border-radius: 3px;
 	padding: 7px;
+	margin-right: 5px;
 	transition: .3s;
+	font-family: ubuntu, sans-serif;
+	font-size: 1em;
 }
 
-button:active {
+.button:active {
 	background: linear-gradient(#ddd, #eee);
 }
 
-button:hover, button:focus {
+.button:hover, button:focus {
 	box-shadow: 0 0 2px #222;
 }
 
@@ -66,4 +70,8 @@ table {
 th, td {
 	border:1px solid #777;
 }
-  
+
+footer {
+	font-size:.8em;
+	color: #222;
+}

GUI/index.html

@@ -38,14 +38,14 @@ <h1>Online SQL interpreter</h1>
 
 SELECT designation,COUNT(*) AS nbr, (AVG(salary)) AS avg_salary FROM employees GROUP BY designation ORDER BY avg_salary DESC;
 SELECT name,hired_on FROM employees ORDER BY hired_on;</textarea>
-    <button id="execute">Execute</button>
-<br>
-<label>Load an SQLite database file: <input type='file' id='dbfile' ></label>
-<button id='savedb'>Save the db</button>
-
-	<div id="error" class="error"></div>
-Result:
-  <pre id="output"></pre>
+
+<button id="execute" class="button">Execute</button>
+<button id='savedb'  class="button">Save the db</button>
+<label class="button">Load an SQLite database file: <input type='file' id='dbfile' ></label>
+
+<div id="error" class="error"></div>
+
+<pre id="output">Results will be displayed here</pre>
 </main>
 
 <script src="codemirror/mode/sql/sql.js"></script>