primarybutton atoms

frontend/src/components/atoms/PrimaryButton.jsx

 import React from 'react'
 import PropTypes from 'prop-types';
 
-const PrimaryButton = ({action, content, children }) => {
+const PrimaryButton = ({action, content, children, styleProps }) => {
   return (
-    <button className="btn-primary px-64p py-20p w-full lg:w-max whitespace-nowrap" onClick={()=>action}>{content ? content : children}</button>
+    <button className={"btn-primary px-64p py-20p w-full lg:w-max whitespace-nowrap" + styleProps} onClick={()=>action}>{content ? content : children}</button>
   )
 }
 

frontend/src/styles/buttons.css

     @apply border-dg-primary-1000 text-dg-primary-1000 hover:border-dg-primary-1200 hover:text-white transition-all hover:transition-all;
   }
 
-  .btn-primary {
-    @apply px-32p py-20p sm:px-64p  text-center
-    text-btn uppercase font-semibold rounded-16  border-transparent cursor-pointer bg-gradient-to-r from-dg-secondary to-dg-primary-900 transition-all hover:bg-gradient-to-r hover:to-dg-secondary hover:from-dg-primary-900 hover:transition-all text-white;
-  }
+  
   .btn-secondary {
     @apply px-32p py-20p sm:px-64p  text-center
     text-btn uppercase font-semibold rounded-16 cursor-pointer border-2 border-dg-primary-400 transition-all hover:transition-all text-dg-primary-900;
   .contact-us-link {
     @apply px-16p py-12p rounded-32 cursor-pointer text-p font-medium font-secondary  text-dg-primary-900 bg-dg-primary-400
   }
+
+  //PrimaryButton
+  .btn-primary {
+    @apply px-32p py-20p sm:px-64p  text-center
+    text-btn uppercase font-semibold rounded-16  border-transparent cursor-pointer bg-gradient-to-r from-dg-secondary to-dg-primary-900 transition-all hover:bg-gradient-to-r hover:to-dg-secondary hover:from-dg-primary-900 hover:transition-all text-white;
+  }
 }