init

themes/duckquill/sass/_buttons.scss

@@ -0,0 +1,72 @@
+.buttons {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	margin-block-start: 4rem;
+
+	&.centered {
+		justify-content: space-around;
+	}
+
+	a {
+		text-decoration: none;
+	}
+
+	button {
+		appearance: none;
+		cursor: pointer;
+		border: none;
+		font-family: inherit;
+
+		&:disabled {
+			cursor: not-allowed;
+
+			&:hover {
+				background-color: var(--fg-muted-1);
+				color: var(--fg-muted-5);
+			}
+
+			&:active {
+				transform: none;
+			}
+		}
+	}
+
+	a,
+	button {
+		transition: var(--transition);
+		box-shadow: var(--edge-highlight);
+		border-radius: var(--rounded-corner);
+		background-color: var(--fg-muted-1);
+		padding: 0.75rem 1rem;
+		color: var(--fg-muted-5);
+		font-weight: bold;
+		font-size: var(--font-size-small);
+		line-height: 1;
+
+		&:hover {
+			background-color: var(--fg-muted-2);
+			color: var(--fg-color);
+		}
+
+		&:active {
+			transform: var(--active);
+		}
+
+		&.colored {
+			box-shadow: none;
+			background-color: transparent;
+			color: var(--accent-color);
+
+			&:hover {
+				box-shadow: var(--edge-highlight);
+				background-color: var(--accent-color-alpha);
+			}
+		}
+
+		&.big {
+			border-radius: 999px;
+			padding: 1rem 1.5rem;
+		}
+	}
+}