diff --git a/src/back/jdd-components/buttons/buttons.css b/src/back/jdd-components/buttons/buttons.css
index 5199169..dbb6758 100644
--- a/src/back/jdd-components/buttons/buttons.css
+++ b/src/back/jdd-components/buttons/buttons.css
@@ -39,5 +39,37 @@
 
 	.button {
 		margin: 0;
+
+		&.button--size-tiny {
+			font-size: 10px;
+		}
+
+		&.button--size-small {
+			font-size: 14px;
+		}
+
+		&.button--size-medium {
+			font-size: 16px;
+
+			@container (max-width: 500px) {
+				font-size: 15px;
+			}
+		}
+
+		&.button--size-large {
+			font-size: 24px;
+
+			@container (max-width: 500px) {
+				font-size: 18px;
+			}
+		}
+
+		&.button--size-extra-large {
+			font-size: 32px;
+
+			@container (max-width: 500px) {
+				font-size: 24px;
+			}
+		}
 	}
 }
diff --git a/src/back/jdd-components/buttons/buttons.jdd.tsx b/src/back/jdd-components/buttons/buttons.jdd.tsx
index a34c057..06c9378 100644
--- a/src/back/jdd-components/buttons/buttons.jdd.tsx
+++ b/src/back/jdd-components/buttons/buttons.jdd.tsx
@@ -14,6 +14,13 @@ const component_arguments = {
 			variant: new ComponentArguments.Enum(button_variants),
 			text: new ComponentArguments.ShortText(),
 			href: new ComponentArguments.ShortText(),
+			size: new ComponentArguments.Enum([
+				"tiny",
+				"small",
+				"medium",
+				"large",
+				"extra-large",
+			]).setDefaultValue("medium"),
 		})
 	),
 } as const;
@@ -37,7 +44,13 @@ export class Buttons extends Component<typeof component_arguments> {
 					...classes,
 				]}
 			>
-				{buttons.map((b) => button({ ...b, text: insert_nbsp(b.text) }))}
+				{buttons.map((b) =>
+					button({
+						...b,
+						text: insert_nbsp(b.text),
+						classes: [`button--size-${b.size}`],
+					})
+				)}
 			</div>
 		);
 	}