diff --git a/html-client/cryps.css b/html-client/cryps.css
index 39a3da7a..10df300f 100755
--- a/html-client/cryps.css
+++ b/html-client/cryps.css
@@ -28,17 +28,17 @@ button, input {
     transition-timing-function: ease;
 }
 
-button:hover {
+button:hover, button:focus {
     /*colour necesary to bash skellington*/
     color: whitesmoke;
     border-color: whitesmoke;
 }
 
-button.right:hover {
+button.right:hover, button.right:focus {
     box-shadow: inset -0.5em 0 0 0 whitesmoke;
 }
 
-button.left:hover {
+button.left:hover, button.left:focus {
     box-shadow: inset 0.5em 0 0 0 whitesmoke;
 }
 
diff --git a/html-client/src/components/game.component.jsx b/html-client/src/components/game.component.jsx
index 074341d7..1bf0dab9 100644
--- a/html-client/src/components/game.component.jsx
+++ b/html-client/src/components/game.component.jsx
@@ -75,7 +75,7 @@ function GamePanel(props) {
                 <button
                     key={i}
                     disabled={!!cdText || ko}
-                    className={`cryp-skill-btn ${highlight ? 'active' : ''}`}
+                    className={`cryp-skill-btn right ${highlight ? 'active' : ''}`}
                     type="submit"
                     onClick={() => setActiveSkill(cryp.id, s.skill)}>
                     {s.skill} {cdText}