diff --git a/src/components/buttonCTA.jsx b/src/components/buttonCTA.jsx
new file mode 100644
index 0000000..64cfb35
--- /dev/null
+++ b/src/components/buttonCTA.jsx
@@ -0,0 +1,29 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { Link } from "gatsby"
+
+import * as ROUTES from "../global/routes"
+
+const ButtonCTA = ({ text, variant }) => {
+  let className = "get-started-btn"
+  if (variant === "secondary") {
+    className = "btn-get-started"
+  }
+  return (
+    <Link to={ROUTES.CALENDAR} className={className}>
+      {text}
+    </Link>
+  )
+}
+
+export default ButtonCTA
+
+ButtonCTA.propTypes = {
+  text: PropTypes.string,
+  variant: PropTypes.string,
+}
+
+ButtonCTA.defaultProps = {
+  text: "Inscription",
+  variant: "primary",
+}
diff --git a/src/components/header.jsx b/src/components/header.jsx
index 551cf94..9501974 100644
--- a/src/components/header.jsx
+++ b/src/components/header.jsx
@@ -2,16 +2,17 @@ import React from "react"
 import { Link } from "gatsby"
 import PropTypes from "prop-types"
 
+import ButtonCTA from "./buttonCTA"
+
 import * as ROUTES from "../global/routes"
 
 const Header = ({ siteTitle }) => (
-  <header id="header" class="fixed-top">
-    <div class="container d-flex align-items-center">
-      <h1 class="logo mr-auto">
+  <header id="header" className="fixed-top">
+    <div className="container d-flex align-items-center">
+      <h1 className="logo mr-auto">
         <Link to={ROUTES.HOME}>{siteTitle}</Link>
       </h1>
-
-      <nav class="nav-menu d-none d-lg-block">
+      <nav className="nav-menu d-none d-lg-block">
         <ul>
           <li>
             <Link to={ROUTES.COURSES}>Cours</Link>
@@ -24,10 +25,7 @@ const Header = ({ siteTitle }) => (
           </li>
         </ul>
       </nav>
-
-      <Link to={ROUTES.CALENDAR} class="get-started-btn">
-        Inscription
-      </Link>
+      <ButtonCTA />
     </div>
   </header>
 )