diff --git a/assets/css/global.scss b/assets/css/global.scss
index 9814e92..74cc217 100644
--- a/assets/css/global.scss
+++ b/assets/css/global.scss
@@ -41,13 +41,19 @@ a {
 
   color: white;
 
-  transition: 400ms;
+  transition-duration: 400ms;
+  transition-property: background-color, color, font-weight;
 
-  &:hover {
+  &:hover, &:focus {
     background-color: white;
     color: $c-background;
     font-weight: 400;
   }
+
+  &:focus {
+    outline-style: dashed;
+    outline-width: 2px;
+  }
 }
 
 .title {
diff --git a/components/SocialIcon.vue b/components/SocialIcon.vue
index 50d6b0d..deefcd6 100644
--- a/components/SocialIcon.vue
+++ b/components/SocialIcon.vue
@@ -41,6 +41,11 @@
     height: 50px;
     width: 50px;
 
+    &:focus {
+      outline-style: dashed;
+      outline-width: 2px;
+    }
+
     @include desktop {
       height: 70px;
       width: 70px;
@@ -83,7 +88,7 @@
       left: -50%;
     }
 
-    &:hover {
+    &:hover, &:focus {
       .title {
         opacity: 1;
       }