diff --git a/components/button-link/ButtonLink.jsx b/components/button-link/ButtonLink.jsx
index 9d4e8715..b9b17ec6 100644
--- a/components/button-link/ButtonLink.jsx
+++ b/components/button-link/ButtonLink.jsx
@@ -1,13 +1,14 @@
 import Link from 'next/link'
 import IconArrowRight from '../../public/icons/arrow-right'
+import clsx from 'clsx'
 
-const ButtonLink = ({ href, isExternal, children }) => {
+const ButtonLink = ({ href, isExternal, children, className }) => {
   return (
     <Link
       href={href}
       target={isExternal ? '_blank' : undefined}
       rel={isExternal ? 'noreferrer' : undefined}
-      className="button-link"
+      className={clsx('button-link', className)}
     >
       {children} <IconArrowRight />
     </Link>
diff --git a/components/button-link/button-link.scss b/components/button-link/button-link.scss
index 93531256..89277513 100644
--- a/components/button-link/button-link.scss
+++ b/components/button-link/button-link.scss
@@ -18,6 +18,7 @@
 
   svg path {
     transition: fill 0.2s ease;
+    fill: $white;
   }
 
   &:hover svg path {
@@ -29,6 +30,7 @@
     background: $white;
     color: $purple;
     font-weight: 600;
+    margin-top: spacing(1);
 
     svg path {
       fill: $purple;