ボタンサイズを変更できるようにした

src/components/LinkButton/LinkButton.module.css

@@ -1,31 +1,58 @@
 .button {
   display: inline-block;
-  font-size: 1.5rem;
   text-align: center;
   text-decoration: none;
 }
 
+.small {
+  font-size: 1rem;
+}
+
+.medium {
+  font-size: 1.5rem;
+}
+
+.large {
+  font-size: 2rem;
+}
+
 .greenButton {
-  padding: 24px 48px;
+  padding: 1em 2em;
   background-color: #439154;
-  color: #FFFFFF;
+  color: #ffffff;
   border: none;
   border-radius: 999px;
   transition: background-color 0.3s ease;
 }
 
+.greenButton.small {
+  padding: 1em 2em;
+}
+
+.greenButton.large {
+  padding: 1em 2em;
+}
+
 .greenButton:hover {
   background-color: #36773c;
 }
 
 .grayButton {
-  padding: 12px 64px;
+  padding: 0.5em 3em;
   background-color: #414141;
-  color: #FFFFFF;
-  border: 1px solid #FFFFFF;
+  color: #ffffff;
+  border: 1px solid #ffffff;
   transition: background-color 0.3s ease;
 }
 
+.grayButton.small {
+  padding: 0.5em 3em;
+}
+
+.grayButton.large {
+  padding: 0.5em 3em;
+}
+
 .grayButton:hover {
   background-color: #000000;
 }

src/components/LinkButton/LinkButton.stories.tsx

@@ -9,16 +9,18 @@ export default {
 
 const Template: StoryFn<typeof LinkButton> = (args) => <LinkButton {...args} />;
 
-export const Primary = Template.bind({});
-Primary.args = {
+export const Green = Template.bind({});
+Green.args = {
   children: 'Click Me',
   variant: 'green',
   href: '/',
+  size: 'medium',
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
+export const Gray = Template.bind({});
+Gray.args = {
   children: 'Click Me',
   variant: 'gray',
   href: '/',
+  size: 'medium',
 };

src/components/LinkButton/LinkButton.tsx

@@ -6,17 +6,20 @@ import styles from './LinkButton.module.css';
 interface ButtonProps extends Omit<LinkProps, 'href'> {
   href: string;
   variant: 'green' | 'gray';
+  size?: 'small' | 'medium' | 'large';
   children: React.ReactNode;
 }
 
 export const LinkButton: React.FC<ButtonProps> = ({
   href,
   variant,
+  size = 'medium',
   children,
   ...props
 }) => {
   const className = clsx(
     styles.button,
+    styles[size],
     variant === 'green' && styles.greenButton,
     variant === 'gray' && styles.grayButton,
   );