diff --git a/src/components/Support/Support.jsx b/src/components/Support/Support.jsx
index 41a9d168a0c2..2523fad2d4b8 100644
--- a/src/components/Support/Support.jsx
+++ b/src/components/Support/Support.jsx
@@ -285,10 +285,12 @@ export default class Support extends Component {
 
           <div className="w-full mt-4">
             <a
-              className="inline-block py-[0.4em] px-[1em] uppercase text-[#175d96] border border-[#175d96] rounded-4xl transition-all duration-[250ms] hover:bg-[#175d96] hover:text-white dark:text-[#4fa8ff] dark:border-[#4fa8ff] dark:hover:bg-[#4fa8ff] dark:hover:text-[#04131f]"
+              className="inline-flex items-center rounded-2xl bg-[#68c8fb] p-[5px] transition-all duration-200 hover:bg-[#7bd0ff]"
               href="https://opencollective.com/webpack#support"
             >
-              Become a {rank === "backer" ? "backer" : "sponsor"}
+              <span className="inline-flex items-center rounded-[1.05rem] bg-gradient-to-b from-[#1f4f82] to-[#173b66] px-6 py-2.5 text-xs font-black tracking-[0.08em] text-slate-50 uppercase shadow-[inset_0_2px_0_rgba(255,255,255,0.08),inset_0_0_0_3px_rgba(10,31,56,0.85),0_1px_0_rgba(255,255,255,0.06)]">
+                Become a {rank === "backer" ? "backer" : "sponsor"}
+              </span>
             </a>
           </div>
         </div>