From 02294a355df75d17ec8b807a060b76f76319d90a Mon Sep 17 00:00:00 2001
From: Marcin Kurczewski <mkurczew@gmail.com>
Date: Sat, 11 Oct 2014 17:41:08 +0200
Subject: [PATCH] Improved button appearance

---
 public_html/css/forms.css | 66 +++++++++++++++++++++++++--------------
 1 file changed, 43 insertions(+), 23 deletions(-)

diff --git a/public_html/css/forms.css b/public_html/css/forms.css
index 102b774c..a5c3a9d3 100644
--- a/public_html/css/forms.css
+++ b/public_html/css/forms.css
@@ -50,14 +50,28 @@ input:-webkit-autofill {
 	-webkit-box-shadow: 0 0 0px 1000px #fafafa inset;
 }
 
+button::before,
+input[type=button]::before {
+	z-index: -1;
+	background: linear-gradient(#f5f5f5, #e5e5e5);
+	display: block;
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	content: '\a0';
+}
 button,
 input[type=button] {
+	vertical-align: top;
+	background: transparent;
+	position: relative;
 	padding: 2px 15px 3px 15px;
-	border: 1px solid #ccc;
-	box-shadow: 0 1px 1px 0 #e5e5e5;
-	background: linear-gradient(#f5f5f5, #e5e5e5);
+	border: 0;
+	box-shadow: 0 1px 1px 0 #e5e5e5, 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
 	color: #444;
-	text-shadow: 0 1px 1px #fafafa;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 1px rgba(255, 255, 255, 0.5);
 	font-family: 'Droid Sans', sans-serif;
 	font-size: 17px;
 }
@@ -65,22 +79,29 @@ button:not(:disabled),
 input[type=button]:not(:disabled) {
 	cursor: pointer;
 }
-button:not(:disabled):hover,
-input[type=button]:not(:disabled):hover {
-	background: linear-gradient(#fafafa, #eaeaea);
+button:not(:disabled):hover::before,
+input[type=button]:not(:disabled):hover::before {
+	opacity: .65;
+}
+button:not(:disabled):active,
+input[type=button]:not(:disabled):active {
+	padding: 3px 15px 2px 15px;
+}
+button:not(:disabled):active::before,
+input[type=button]:not(:disabled):active::before {
+	transform: rotate(180deg);
+}
+button:not(:disabled):focus,
+input[type=button]:not(:disabled):focus {
+	border-color: #64C2ED;
 }
 button:disabled {
 	color: gray;
 }
 
-button.highlight,
-input[type=button].highlight {
-	background: linear-gradient(#74D2FD, #64C2ED);
-	text-shadow: 0 1px 1px #8ff;
-}
-button:not(:disabled):hover.highlight,
-input[type=button]:not(:disabled):hover.highlight {
-	background: linear-gradient(#84E2FF, #74D2FD);
+button.highlight::before,
+input[type=button].highlight::before {
+	background: linear-gradient(rgb(160, 221, 251), rgb(101, 188, 239));
 }
 
 button:focus,
@@ -93,9 +114,8 @@ input::-moz-focus-inner {
 	border: 0;
 }
 .tag-input.focused,
-button:focus,
 textarea:focus,
-input:not(.tag-real-input):focus {
+input:not([type=button]):not(.tag-real-input):focus {
 	box-shadow: 0 0 0 1px #64C2ED inset;
 	border-color: #64C2ED;
 }
@@ -112,23 +132,23 @@ input[type=checkbox] + label {
 	-o-user-select: none;
 	user-select: none;
 }
-input[type=radio] + label:before,
-input[type=checkbox] + label:before {
+input[type=radio] + label::before,
+input[type=checkbox] + label::before {
 	font-family: 'FontAwesome';
 	display: inline-block;
 	width: 1em;
 	text-align: left;
 }
-input[type=radio] + label:before {
+input[type=radio] + label::before {
 	content: "\f1db";
 }
-input[type=radio]:checked + label:before {
+input[type=radio]:checked + label::before {
 	content: "\f192";
 }
-input[type=checkbox] + label:before {
+input[type=checkbox] + label::before {
 	content: "\f096";
 }
-input[type=checkbox]:checked + label:before {
+input[type=checkbox]:checked + label::before {
 	content: "\f046";
 }