Make the CSS-styled button feel a bit nicer to use by flattening the

active state, also introduce some temporary styles until browsers
catch up with the standard syntax
 - Legacy-Id: 5283

Author: OleLaursen

static/css/base2.css

@@ -206,6 +206,12 @@ table.milestones .doc { display: block; padding-left: 1em; }
 
 .stream-state .milestone { display: inline-block; font-size: smaller; background-color: #d5dde6; padding: 0 0.2em; margin-left: 0.3em; }
 
-.button { display: inline-block; font-weight: normal; background: #eee; background: linear-gradient(#fff, #ddd); border: 1px solid #666; border-radius: 3px; color: #222; padding: 4px 12px; text-align: center; text-decoration: none; outline: none; transition-duration: 0.2s; cursor: pointer; margin-right: 0.3em; }
-.button:hover { background: #ddd; background: linear-gradient(#eee, #ccc); color: #111; }
-.button:active { background: #ccc; background: linear-gradient(#ddd, #bbb); color: #000; }
+.button {
+  display: inline-block; padding: 4px 12px; margin-right: 0.3em;
+  color: #222; font-weight: normal; text-align: center; text-decoration: none; outline: none; cursor: pointer;
+  background: #eee; background: linear-gradient(#fff, #ddd); background: -webkit-linear-gradient(#fff, #ddd); background: -moz-linear-gradient(#fff, #ddd);
+  border: 1px solid #666; border-radius: 3px;
+  transition-duration: 0.2s;
+}
+.button:hover { color: #111; background: #ddd; background: linear-gradient(#eee, #ccc); background: -webkit-linear-gradient(#eee, #ccc); background: -moz-linear-gradient(#eee, #ccc); }
+.button:active { color: #000; background: #ccc; }