1 files changed, 91 insertions, 0 deletions
diff --git a/css/component/button.css b/css/component/button.css
index e69de29b..cf0f8624 100644
--- a/css/component/button.css
+++ b/css/component/button.css
@@ -0,0 +1,91 @@
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: $margin-m-2;
+  font-size: $font-size-header;
+  font-weight: $font-weight-medium;
+  transition: all $transition-duration ease;
+  cursor: pointer;
+  border: none;
+  text-decoration: none;
+  user-select: none;
+  outline: none;
+  padding: $margin-m-0 $margin-l-0;
+}
+.btn:focus-visible {
+  outline: 2px solid $color-accent;
+  outline-offset: 2px;
+}
+.btn:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.btn-default {
+  background-color: $color-text-primary;
+  color: $color-background;
+}
+.btn-default:hover {
+  opacity: 0.9;
+}
+.btn-default:active {
+  opacity: 0.95;
+}
+.btn-outline {
+  border: 1px solid $color-border;
+  background-color: transparent;
+  color: $color-text-primary;
+}
+.btn-outline:hover {
+  border-color: $color-accent;
+  color: $color-accent;
+}
+.btn-ghost {
+  background-color: transparent;
+  color: $color-text-primary;
+}
+.btn-ghost:hover {
+  background-color: $color-text-fourth;
+}
+.btn-link {
+  background-color: transparent;
+  color: $color-accent;
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+.btn-link:hover {
+  text-decoration: none;
+}
+@-moz-keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}