diff --git a/src/lib/components/Keyboard.css b/src/lib/components/Keyboard.css
index 8bb9d53c..9425ee9d 100644
--- a/src/lib/components/Keyboard.css
+++ b/src/lib/components/Keyboard.css
@@ -69,6 +69,11 @@ html {
   display: flex;
   align-items: center;
   justify-content: center;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.simple-keyboard.hg-theme-default .hg-button.hg-activeButton {
+  background: #efefef;
 }
 
 /* When using option "useButtonTag" */
diff --git a/src/lib/components/Keyboard.js b/src/lib/components/Keyboard.js
index a3bad740..67f1c49c 100644
--- a/src/lib/components/Keyboard.js
+++ b/src/lib/components/Keyboard.js
@@ -1176,6 +1176,8 @@ class SimpleKeyboard {
           buttonDOM.setAttribute(attribute, value);
         });
 
+        const hgActiveButtonClass = "hg-activeButton";
+
         /**
          * Handle button click event
          */
@@ -1189,11 +1191,18 @@ class SimpleKeyboard {
            * Handle PointerEvents
            */
           buttonDOM.onpointerdown = e => {
+            buttonDOM.classList.add(hgActiveButtonClass);
             this.handleButtonClicked(button);
             this.handleButtonMouseDown(button, e);
           };
-          buttonDOM.onpointerup = () => this.handleButtonMouseUp(button);
-          buttonDOM.onpointercancel = () => this.handleButtonMouseUp(button);
+          buttonDOM.onpointerup = () => {
+            buttonDOM.classList.remove(hgActiveButtonClass);
+            this.handleButtonMouseUp(button);
+          };
+          buttonDOM.onpointercancel = () => {
+            buttonDOM.classList.remove(hgActiveButtonClass);
+            this.handleButtonMouseUp(button);
+          };
         } else {
           /**
            * Fallback for browsers not supporting PointerEvents
@@ -1203,11 +1212,18 @@ class SimpleKeyboard {
              * Handle touch events
              */
             buttonDOM.ontouchstart = e => {
+              buttonDOM.classList.add(hgActiveButtonClass);
               this.handleButtonClicked(button);
               this.handleButtonMouseDown(button, e);
             };
-            buttonDOM.ontouchend = () => this.handleButtonMouseUp(button);
-            buttonDOM.ontouchcancel = () => this.handleButtonMouseUp(button);
+            buttonDOM.ontouchend = () => {
+              buttonDOM.classList.remove(hgActiveButtonClass);
+              this.handleButtonMouseUp(button);
+            };
+            buttonDOM.ontouchcancel = () => {
+              buttonDOM.classList.remove(hgActiveButtonClass);
+              this.handleButtonMouseUp(button);
+            };
           } else {
             /**
              * Handle mouse events
@@ -1216,8 +1232,14 @@ class SimpleKeyboard {
               this.isMouseHold = false;
               this.handleButtonClicked(button);
             };
-            buttonDOM.onmousedown = e => this.handleButtonMouseDown(button, e);
-            buttonDOM.onmouseup = () => this.handleButtonMouseUp(button);
+            buttonDOM.onmousedown = e => {
+              buttonDOM.classList.add(hgActiveButtonClass);
+              this.handleButtonMouseDown(button, e);
+            };
+            buttonDOM.onmouseup = () => {
+              buttonDOM.classList.remove(hgActiveButtonClass);
+              this.handleButtonMouseUp(button);
+            };
           }
         }