From 99b7296b44540c51c0273dcaf4a4a05308336fb4 Mon Sep 17 00:00:00 2001
From: BcRikko <s.shin1106@gmail.com>
Date: Sun, 7 Jul 2019 14:30:09 +0900
Subject: [PATCH] fix(buttons.scss): fix focus color of buttons

fix #74
---
 docs/script.js             | 2 +-
 scss/elements/buttons.scss | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/docs/script.js b/docs/script.js
index 5d27019..4a2cb7f 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -11,7 +11,7 @@ const sampleCollection = [
   {
     title: 'buttons',
     showCode: false,
-    code: `<a class="nes-btn">Normal</a>
+    code: `<a class="nes-btn" href="#">Normal</a>
 
 <button type="button" class="nes-btn is-primary">Primary</button>
 <button type="button" class="nes-btn is-success">Success</button>
diff --git a/scss/elements/buttons.scss b/scss/elements/buttons.scss
index c93d05c..e20fb06 100644
--- a/scss/elements/buttons.scss
+++ b/scss/elements/buttons.scss
@@ -12,8 +12,7 @@
     box-shadow: inset -4px -4px $shadow;
   }
 
-  &:hover,
-  &:focus {
+  &:hover {
     color: inherit;
     text-decoration: none;
     background-color: $hover-background;
@@ -23,6 +22,10 @@
     }
   }
 
+  &:focus {
+    box-shadow: 0 0 0 6px rgba($shadow, 0.3);
+  }
+
   &:active:not(.is-disabled)::after {
     box-shadow: inset 4px 4px $shadow;
   }