Make buttons sexy

assets/pwny.css

@@ -25,13 +25,39 @@ html,body,#app{margin:0;padding:0;width:100%;height:100%;}
 #col1 .ace_editor {width:100%;height:85%;}
 #col2 {width: 49.5%;height: 100%;float:right;}
 #col2 iframe {width:100%;height:100%;}
-#btn_run {background-color:#060;color:#fff;}
-#btn_add {background-color:#660;color:#fff;}
-#btn_delete {background-color:#600;color:#fff;}
-#btn_share {background-color:#669;color:#fff;}
-#templates {background-color:#000;color:#fff;}
-#syntax {background-color:#066;color:#fff;}
-#syntax option:checked {background-color:#033;}
+#btn_run {
+	background-color: #82BF56;
+	border-bottom: 5px solid #669644;
+	text-shadow: 0px -2px #669644;
+}
+#btn_add {
+	background-color: #F2CF66;
+	border-bottom: 5px solid #D1B358;
+	text-shadow: 0px -2px #D1B358;
+}
+#btn_delete {
+	background-color: #E74C3C;
+	border-bottom: 5px solid #BD3E31;
+	text-shadow: 0px -2px #BD3E31;
+}
+#btn_share {
+	background-color: #3498DB;
+	border-bottom: 5px solid #2980B9;
+	text-shadow: 0px -2px #2980B9;
+}
+#templates {
+	background-color: #112233;
+	border-bottom: 5px solid #051525;
+	text-shadow: 0px -2px #051525;
+}
+#syntax {
+	background-color: #226666;
+	border-bottom: 5px solid #155050;
+	text-shadow: 0px -2px #155050;
+}
+#syntax option:checked {
+	background-color:#033;
+}
 #logo {
 	position: fixed;
 	top: 0;
@@ -90,10 +116,20 @@ html,body,#app{margin:0;padding:0;width:100%;height:100%;}
 }
 
 #drawer li button, #drawer li select {
-	display: block;
-	text-align: center;
 	font-family: 'Source Code Pro';
-	width: 290px;
+	position: relative;
+	padding: 10px 40px;
+  margin: 0px 10px 10px 10px;
+	border-radius: 10px;
+	font-size: 18px;
+	color: #FFF;
+	text-decoration: none;
+}
+
+#drawer li button:active {
+	transform: translate(0px,5px);
+  -webkit-transform: translate(0px,5px);
+	border-bottom: 1px solid;
 }
 
 #drawer li {