diff --git a/app.js b/app.js
index 29d00e983..4ad7dc55d 100644
--- a/app.js
+++ b/app.js
@@ -923,14 +923,14 @@ function toggleRecording() {
     }
 
     var oldState = focus.recordingEnabled;
-    buttonClick("#recordButton", "icon-recEnable icon-recDisable");
+    $('#recordButton').toggleClass('active');
     focus.setRecording(!oldState,
                         recordingToken,
                         function (state) {
                             console.log("New recording state: ", state);
                             if (state == oldState) //failed to change, reset the token because it might have been wrong
                             {
-                                buttonClick("#recordButton", "icon-recEnable icon-recDisable");
+                                $('#recordButton').toggleClass('active');
                                 setRecordingToken(null);
                             }
                         }
diff --git a/css/main.css b/css/main.css
index e0a1726e9..620faf17e 100644
--- a/css/main.css
+++ b/css/main.css
@@ -151,6 +151,27 @@ html, body{
                     0 -1px 10px #00ccff;
 }
 
+#recordButton {
+    -webkit-transition: all .5s ease-in-out;
+    -moz-transition: all .5s ease-in-out;
+    transition: all .5s ease-in-out;
+}
+/*#ffde00*/
+#recordButton.active {
+    -webkit-text-shadow:    -1px 0 10px #00ccff,
+    0 1px 10px #00ccff,
+    1px 0 10px #00ccff,
+    0 -1px 10px #00ccff;
+    -moz-text-shadow:   1px 0 10px #00ccff,
+    0 1px 10px #00ccff,
+    1px 0 10px #00ccff,
+    0 -1px 10px #00ccff;
+    text-shadow:    -1px 0 10px #00ccff,
+    0 1px 10px #00ccff,
+    1px 0 10px #00ccff,
+    0 -1px 10px #00ccff;
+}
+
 a.button:hover {
     top: 0;
     cursor: pointer;