Add invisible button

Unchanged from dotcom

Author: simurai

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.

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;
+  }
+}