First release

node_modules/nes.css/scss/elements/buttons.scss

@@ -0,0 +1,87 @@
+@mixin btn-style($color, $background, $hover-background, $shadow) {
+  color: $color;
+  background-color: $background;
+
+  &::after {
+    position: absolute;
+    top: -$border-size;
+    right: -$border-size;
+    bottom: -$border-size;
+    left: -$border-size;
+    content: "";
+    box-shadow: inset -4px -4px $shadow;
+  }
+
+  &:hover {
+    color: $color;
+    text-decoration: none;
+    background-color: $hover-background;
+
+    &::after {
+      box-shadow: inset -6px -6px $shadow;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 6px rgba($shadow, 0.3);
+  }
+
+  &:active:not(.is-disabled)::after {
+    box-shadow: inset 4px 4px $shadow;
+  }
+}
+
+// Default style
+.nes-btn {
+  @include compact-rounded-corners();
+
+  position: relative;
+  display: inline-block;
+  padding: 6px 8px;
+  margin: $border-size;
+  text-align: center;
+  vertical-align: middle;
+  cursor: $cursor-click-url, pointer;
+  user-select: none;
+
+  @include btn-style(
+    $base-color,
+    map-get($default-colors, "normal"),
+    map-get($default-colors, "hover"),
+    map-get($default-colors, "shadow")
+  );
+
+  &:focus {
+    outline: 0;
+  }
+
+  &.is-disabled,
+  &.is-disabled:hover,
+  &.is-disabled:focus {
+    color: $base-color;
+    cursor: not-allowed;
+    background-color: map-get($disabled-colors, "normal");
+    box-shadow: inset -4px -4px map-get($disabled-colors, "shadow");
+    opacity: 0.6;
+  }
+
+  // Other styles
+  // prettier-ignore
+  $types:
+    "primary" $background-color map-get($primary-colors, "normal") map-get($primary-colors, "hover") map-get($primary-colors, "shadow"),
+    "success" $background-color map-get($success-colors, "normal") map-get($success-colors, "hover") map-get($success-colors, "shadow"),
+    "warning" $base-color map-get($warning-colors, "normal") map-get($warning-colors, "hover") map-get($warning-colors, "shadow"),
+    "error" $background-color map-get($error-colors, "normal") map-get($error-colors, "hover") map-get($error-colors, "shadow");
+
+  @each $type in $types {
+    &.is-#{nth($type, 1)} {
+      @include btn-style(nth($type, 2), nth($type, 3), nth($type, 4), nth($type, 5));
+    }
+  }
+
+  input[type="file"] {
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+  }
+}