diff --git a/docs/content/docs/components/buttons.md b/docs/content/docs/components/buttons.md
index 3a1efe5..8728105 100644
--- a/docs/content/docs/components/buttons.md
+++ b/docs/content/docs/components/buttons.md
@@ -53,3 +53,21 @@ Inspired by [Imperfect Buttons](https://codepen.io/tmrDevelops/pen/VeRvKX)
```
+
+### Outline colors
+
+
+
+
+
+Danger
+
+#### Code:
+
+```html
+
+
+
+
+Danger
+```
\ No newline at end of file
diff --git a/package.json b/package.json
index 04d7aa2..33a0ba3 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
"build": "node node_modules/gulp/bin/gulp.js build",
"test": "echo \"Error: no test specified\" && exit 1",
"postinstall": "gulp postinstall",
- "stylelint": "node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'"
+ "stylelint": "node node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'"
},
"repository": {
"type": "git",
diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss
index ca793f2..d68ace0 100644
--- a/src/components/_buttons.scss
+++ b/src/components/_buttons.scss
@@ -72,7 +72,6 @@ a {
}
}
-
@each $colorName, $color, $color-light, $color-text in $colors {
.alert-#{$colorName} {
background-color: $color-light;
@@ -94,3 +93,24 @@ a {
}
}
}
+
+@each $colorName, $color, $color-light, $color-text in $colors-outline {
+ button.btn-#{$colorName},
+ .paper-btn.btn-#{$colorName},
+ [type='button'].btn-#{$colorName} {
+ background-color: $white;
+ border-color: darken($color-light, 10%);
+ color: $color-text;
+
+ &:hover {
+ border-color: $color;
+ background-color: $color-light;
+ }
+
+ &:hover {
+ &:active {
+ background-color: darken($color-light, 10%);
+ }
+ }
+ }
+}
diff --git a/src/core/_config.scss b/src/core/_config.scss
index d0d8ebd..a9fc21c 100644
--- a/src/core/_config.scss
+++ b/src/core/_config.scss
@@ -45,6 +45,13 @@ $colors: (primary, $primary, $primary-light, $primary-text),
(warning, $warning, $warning-light, $warning-text),
(danger, $danger, $danger-light, $danger-text),
(muted, $muted, $muted-light, $muted-text);
+
+$colors-outline: (primary-outline, $primary, $primary-light, $primary),
+ (secondary-outline, $secondary, $secondary-light, $secondary-text),
+ (success-outline, $success, $success-light, $success-text),
+ (warning-outline, $warning, $warning-light, $warning-text),
+ (danger-outline, $danger, $danger-light, $danger-text),
+ (muted-outline, $muted, $muted-light, $muted-text);
/* stylelint-enable */
/**