1 files changed, 101 insertions, 0 deletions

diff --git a/src/styles/partials/_buttons.scss b/src/styles/partials/_buttons.scss
new file mode 100644
index 0000000..e93f0fc
--- /dev/null
+++ b/src/styles/partials/_buttons.scss
@@ -0,0 +1,101 @@
+button,
+a.btn, span.btn,
+input[type=button], input[type=reset], input[type=submit] {
+  display: inline-flex;
+  align-items: center;
+  border: thin solid var(--darken-3);
+  background: var(--darken-1);
+  padding: var(--space-3);
+  color: inherit;
+  text-transform: uppercase;
+  text-decoration: none;
+  font-size: .875rem;
+  font-weight: 100;
+  cursor: pointer;
+  text-shadow: var(--extruded-light);
+  --focus-color: var(--darken-1);
+  --active-color: var(--darken-1);
+
+  &.btn-lg {
+    padding: .5rem 1rem;
+    font-size: 1.25rem;
+    line-height: 1.5;
+    border-radius: .3rem;
+  }
+
+  &.primary {
+    background-color: var(--primary);
+    color: var(--primary-txt);
+    text-shadow: var(--extruded-dark);
+    --focus-color: var(--lighten-1);
+    --active-color: var(--lighten-1);
+  }
+
+  // Icons
+
+  &.btn-icon-only {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--lighten-1);
+    border-radius: 50%;
+    margin-left: 1ch;
+    padding: var(--space-2);
+    border-color: transparent;
+
+    .icon {
+      margin: var(--space-2);
+      --size: 1.5rem;
+      width: var(--size, 1.5rem);
+      height: var(--size, 1.5rem);
+      display: inline-block;
+      content: '';
+      background-repeat: no-repeat;
+    }
+  }
+
+  &:hover, &:focus {
+    background-image: linear-gradient(to right, var(--focus-color), var(--focus-color) 100%);
+    text-decoration: none;
+  }
+
+  .icon {
+    --size: 1rem;
+    width: var(--size, 1rem);
+    height: var(--size, 1rem);
+  }
+}
+
+form:invalid button,
+button[aria-disabled],
+a.btn[aria-disabled],
+span.btn[aria-disabled] {
+  opacity: .5;
+  cursor: not-allowed;
+  filter: grayscale(100%);;
+}
+
+
+a.goto-top {
+  position: fixed;
+  display: flex;
+  bottom: 2em;
+  right: 2em;
+  width: 1em;
+  height: 1em;
+  justify-content: center;
+  border: .75em solid var(--primary);
+  align-items: center;
+  font-size: 200%;
+  background-color: var(--primary);
+  color: var(--primary-txt);
+  border-radius: 50%;
+}
+
+@media (prefers-color-scheme: dark) {
+  button,
+  a.btn, span.btn,
+  input[type=button], input[type=reset], input[type=submit] {
+    background: none;
+  }
+}
\ No newline at end of file