💄(buttons) style buttons like in the figma

add new variant/size options to button component to be able to easily
create the outline+large buttons

src/components/Button.tsx

@@ -5,6 +5,8 @@ import { CommonProps } from '@/types'
 interface ButtonProps extends CommonProps {
   href?: string
   'aria-label'?: string
+  variant?: 'outline'
+  size?: 'large'
 }
 
 export const ButtonStyle =
@@ -14,19 +16,26 @@ export const Button: React.FC<ButtonProps> = ({
   children,
   href,
   className,
+  size,
+  variant,
   'aria-label': ariaLabel,
-}) => (
-  <>
-    {href ? (
-      <Link
-        href={href}
-        className={twMerge(ButtonStyle, className)}
-        aria-label={ariaLabel}
-      >
-        {children}
-      </Link>
-    ) : (
-      <button className={twMerge(ButtonStyle, className)}>{children}</button>
-    )}
-  </>
-)
+}) => {
+  const classNames = twMerge(
+    ButtonStyle,
+    size === 'large' && 'text-xl py-6 px-14 w-fit',
+    variant === 'outline' &&
+      'bg-transparent border border-2 font-bold border-blue-1 text-blue-1 hover:bg-dsfr-hover-tint',
+    className
+  )
+  return (
+    <>
+      {href ? (
+        <Link href={href} className={classNames} aria-label={ariaLabel}>
+          {children}
+        </Link>
+      ) : (
+        <button className={classNames}>{children}</button>
+      )}
+    </>
+  )
+}

src/pages/communs.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image'
-import { ButtonExternalLink } from '@/components/ExternalLink'
+import { Button } from '@/components/Button'
 import { Br } from '@/components/Br'
 import { Layout } from '@/components/Layout'
 
@@ -222,9 +222,13 @@ export default function Communs() {
       </div>
       <h2 className="sr-only">Proposer un projet</h2>
       <p className="w-full justify-center flex pt-10 pb-40">
-        <ButtonExternalLink href="https://www.demarches-simplifiees.fr/commencer/fonds-communs-numeriques-pour-la-suite-numerique">
+        <Button
+          variant="outline"
+          size="large"
+          href="https://www.demarches-simplifiees.fr/commencer/fonds-communs-numeriques-pour-la-suite-numerique"
+        >
           Je propose mon projet&nbsp;!
-        </ButtonExternalLink>
+        </Button>
       </p>
     </Layout>
   )

src/sections/Initiatives.tsx

@@ -106,10 +106,12 @@ export const Initiatives = () => (
       </p>
       <p>
         <Button
-          aria-label="En savoir plus sur comment contribuer à La Suite numérique"
           href="/communs"
+          variant="outline"
+          size="large"
+          className="hover:bg-white"
         >
-          En savoir plus
+          Comment proposer mon projet ?
         </Button>
       </p>
     </ContentSection>

tailwind.config.ts

@@ -63,6 +63,7 @@ const config: Config = {
         'blue-1': '#f5f5fe',
         'blue-2': '#1212ff',
         'blue-3': '#f3f6fe',
+        'hover-tint': '#f6f6f6',
       },
     },
     extend: {