From db6d65c570a2644d911042b6dd0516d956555dbf Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Thu, 24 Oct 2019 13:40:54 +0900
Subject: [PATCH] Add invisible button

Unchanged from dotcom
---
 docs/content/components/buttons.md |  9 +++++++++
 src/buttons/button.scss            | 24 ++++++++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md
index e1909e49..ae122e02 100644
--- a/docs/content/components/buttons.md
+++ b/docs/content/components/buttons.md
@@ -118,6 +118,15 @@ Create a button that looks like a link with `.btn-link`. Rather than using an `<
 <button class="btn-link" type="button">Link button</button>
 ```
 
+## Invisible button
+
+When you want a link, but you want it padded and line heighted like a button best for "cancel" actions on forms.
+
+```html live
+<button class="btn btn-invisible" type="button">Cancel</button>
+<button class="btn" type="button">Submit</button>
+```
+
 ## Close button
 
 When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles.
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index f97fec66..09ce7518 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -131,3 +131,27 @@
     }
   }
 }
+
+// Invisible button
+//
+// Typically used as a "cancel" button next to a .btn
+.btn-invisible {
+  color: $text-blue;
+  background-color: $bg-white; // Reset default gradient backgrounds and colors
+  background-image: none;
+  border: 0;
+
+  // stylelint-disable-next-line primer/no-override
+  &:hover,
+  &:active,
+  &:focus,
+  &.selected,
+  &.zeroclipboard-is-hover,
+  &.zeroclipboard-is-active {
+    color: $text-blue;
+    background: none;
+    outline: none;
+    // stylelint-disable-next-line primer/variables
+    box-shadow: none;
+  }
+}