init module

assets/css/buttons.css

@@ -0,0 +1,94 @@
+.button-container {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+button,
+.button,
+a.button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 18px;
+  margin-bottom: 5px;
+  text-decoration: none;
+  text-align: center;
+  border-radius: 0;
+  border: 1px solid var(--accent);
+  background: var(--accent);
+  font: inherit;
+  font-weight: bold;
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+
+  &:hover {
+    background: color-mod(var(--accent) a(90%));
+  }
+
+  /* variants */
+
+  &.outline {
+    background: transparent;
+    box-shadow: none;
+    padding: 8px 18px;
+
+    :hover {
+      transform: none;
+      box-shadow: none;
+    }
+  }
+
+  &.link {
+    background: none;
+    font-size: 1rem;
+  }
+
+  /* sizes */
+
+  &.small {
+    font-size: .8rem;
+  }
+
+  &.wide {
+    min-width: 200px;
+    padding: 14px 24px;
+  }
+}
+
+a.read-more,
+a.read-more:hover,
+a.read-more:active {
+  display: inline-flex;
+  border: none;
+  color: var(--accent);
+  background: none;
+  box-shadow: none;
+  padding: 0;
+  margin: 20px 0;
+  max-width: 100%;
+}
+
+.code-toolbar {
+  margin-bottom: 20px;
+
+  .toolbar-item a {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3px 8px;
+    margin-bottom: 5px;
+    text-decoration: none;
+    text-align: center;
+    font-size: 13px;
+    font-weight: 500;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    appearance: none;
+    cursor: pointer;
+    outline: none;
+  }
+}