Fix #1583

diff --git a/CHANGELOG.md b/CHANGELOG.md
index af9584bfd3e9a1b940e15d0828c98f4f0e64fb7a..9d78f7f0f37a1771d03fff1e7ee6d00e9219100c 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## 0.9.2
 
+### New features
+
+* Fix #1583 New `is-ghost` button that behaves / looks like a regular link
+
 ### Bug fixes
 
 * #3005 Fix `column` offsets in RTL

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 9ad23d81b602614f808acda0da048f1962e7dd5f..e66856d8ff9028928f6425f4cfbc2d4493ce6eb8 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -540,6 +540,18 @@ fieldset[disabled] .button.is-text {
   box-shadow: none;
 }
 
+.button.is-ghost {
+  background: none;
+  border-color: transparent;
+  color: #3273dc;
+  text-decoration: none;
+}
+
+.button.is-ghost:hover, .button.is-ghost.is-hovered {
+  color: #3273dc;
+  text-decoration: underline;
+}
+
 .button.is-white {
   background-color: white;
   border-color: transparent;

diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html
index f4ebe36d3fc3849272869747bc5c17cf090c80d2..66b8be0649485b3dbff5e31a95534258dd9f3586 100644 (file)
--- a/docs/documentation/elements/button.html
+++ b/docs/documentation/elements/button.html
@@ -31,6 +31,7 @@ meta:
 <button class="button is-dark">Dark</button>
 <button class="button is-black">Black</button>
 <button class="button is-text">Text</button>
+<button class="button is-ghost">Ghost</button>
 {% endcapture %}
 
 {% capture button_colors_b_example %}

diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index 9e78de5a6a9433fe76e6a2211023af7bfdf33d6a..5a1c55ac7f6dc123dfb73e4015c376c34eae1338 100644 (file)
--- a/sass/elements/button.sass
+++ b/sass/elements/button.sass
@@ -24,6 +24,13 @@ $button-text-decoration: underline !default
 $button-text-hover-background-color: $background !default
 $button-text-hover-color: $text-strong !default
 
+$button-ghost-background: none !default
+$button-ghost-border-color: transparent !default
+$button-ghost-color: $link !default
+$button-ghost-decoration: none !default
+$button-ghost-hover-color: $link !default
+$button-ghost-hover-decoration: underline !default
+
 $button-disabled-background-color: $scheme-main !default
 $button-disabled-border-color: $border !default
 $button-disabled-shadow: none !default
@@ -117,6 +124,15 @@ $button-colors: $colors !default
       background-color: transparent
       border-color: transparent
       box-shadow: none
+  &.is-ghost
+    background: $button-ghost-background
+    border-color: $button-ghost-border-color
+    color: $button-ghost-color
+    text-decoration: $button-ghost-decoration
+    &:hover,
+    &.is-hovered
+      color: $button-ghost-hover-color
+      text-decoration: $button-ghost-hover-decoration
   @each $name, $pair in $button-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)