🎉 buttonsの追加

css/nes.css

@@ -357,6 +357,117 @@ body {
 }
 
 .btn {
-  color: black;
+  position: relative;
+  display: inline-block;
+  padding: 10px 12px;
+  margin: 4px;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  color: #212529;
+  background-color: #fff;
+  box-shadow: inset -4px -4px #adafbc;
+}
+
+.btn:hover {
+  background-color: #e7e7e7;
+  box-shadow: inset -6px -6px #adafbc;
+}
+
+.btn:active {
+  box-shadow: inset 4px 4px #adafbc;
+}
+
+.btn::before, .btn::after {
+  position: absolute;
+  box-sizing: content-box;
+  width: 100%;
+  height: 100%;
+  content: "";
+  border-color: #212529;
+  border-style: solid;
+  border-width: 4px;
+}
+
+.btn::before {
+  top: -4px;
+  left: 0;
+  border-right: 2px;
+  border-left: 2px;
+}
+
+.btn::after {
+  top: 0;
+  left: -4px;
+  border-top: 2px;
+  border-bottom: 2px;
+}
+
+.btn:focus {
+  outline: 0;
+}
+
+.btn.is-primary {
+  color: #fff;
+  background-color: #92cc41;
+  box-shadow: inset -4px -4px #4aa52e;
+}
+
+.btn.is-primary:hover {
+  background-color: #76c442;
+  box-shadow: inset -6px -6px #4aa52e;
+}
+
+.btn.is-primary:active {
+  box-shadow: inset 4px 4px #4aa52e;
+}
+
+.btn.is-success {
+  color: #fff;
+  background-color: #209cee;
+  box-shadow: inset -4px -4px #006bb3;
+}
+
+.btn.is-success:hover {
+  background-color: #108de0;
+  box-shadow: inset -6px -6px #006bb3;
+}
+
+.btn.is-success:active {
+  box-shadow: inset 4px 4px #006bb3;
+}
+
+.btn.is-warning {
+  color: #212529;
+  background-color: #f7d51d;
+  box-shadow: inset -4px -4px #e59400;
+}
+
+.btn.is-warning:hover {
+  background-color: #f2c409;
+  box-shadow: inset -6px -6px #e59400;
+}
+
+.btn.is-warning:active {
+  box-shadow: inset 4px 4px #e59400;
+}
+
+.btn.is-error {
+  color: #fff;
+  background-color: #e76e55;
+  box-shadow: inset -4px -4px #8c2022;
+}
+
+.btn.is-error:hover {
+  background-color: #ce372b;
+  box-shadow: inset -6px -6px #8c2022;
+}
+
+.btn.is-error:active {
+  box-shadow: inset 4px 4px #8c2022;
 }
 /*# sourceMappingURL=nes.css.map */

index.html

@@ -51,6 +51,10 @@
       <p>NES-style CSS Framework.</p>
     </header>
 
-    <button type="button" class="btn">normal</button>
+    <button type="button" class="btn">Normal</button>
+    <button type="button" class="btn is-primary">Primary</button>
+    <button type="button" class="btn is-success">Success</button>
+    <button type="button" class="btn is-warning">Warning</button>
+    <button type="button" class="btn is-error">Error</button>
   </body>
 </html>

scss/elements/_index.scss

@@ -1,3 +1,3 @@
 @charset "utf-8";
 
-@import "button.scss";
+@import "buttons.scss";

scss/elements/button.scss

@@ -1,4 +0,0 @@
-.btn {
-  // dummy
-  color: black;
-}

scss/elements/buttons.scss

@@ -0,0 +1,80 @@
+@mixin btn-style($color, $background, $hover-background, $shadow) {
+  color: $color;
+  background-color: $background;
+  box-shadow: inset -4px -4px $shadow;
+
+  &:hover {
+    background-color: $hover-background;
+    box-shadow: inset -6px -6px $shadow;
+  }
+
+  &:active {
+    box-shadow: inset 4px 4px $shadow;
+  }
+}
+
+// Default style
+.btn {
+  $border-size: 4px;
+
+  position: relative;
+  display: inline-block;
+  padding: 10px 12px;
+  margin: $border-size;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+
+  // FIXME: Chromeでwhite, #fff, #ffffffを指定したときボタンのbackground-colorが正しく反映されない
+  @include btn-style($base-color, #fff, #e7e7e7, #adafbc);
+
+  &::before,
+  &::after {
+    position: absolute;
+    box-sizing: content-box;
+    width: 100%;
+    height: 100%;
+    content: "";
+    border-color: $base-color;
+    border-style: solid;
+    border-width: $border-size;
+  }
+
+  &::before {
+    top: $border-size * -1;
+    left: 0;
+    border-right: $border-size / 2;
+    border-left: $border-size / 2;
+  }
+
+  &::after {
+    top: 0;
+    left: $border-size * -1;
+    border-top: $border-size / 2;
+    border-bottom: $border-size / 2;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  // Other styles
+  // prettier-ignore
+  $types:
+    "primary" #fff #92cc41 #76c442 #4aa52e,
+    "success" #fff #209cee #108de0 #006bb3,
+    "warning" $base-color #f7d51d #f2c409 #e59400,
+    "error" #fff #e76e55 #ce372b #8c2022;
+
+  @each $type in $types {
+    &.is-#{nth($type, 1)} {
+      @include btn-style(
+        nth($type, 2),
+        nth($type, 3),
+        nth($type, 4),
+        nth($type, 5)
+      );
+    }
+  }
+}