style(support): redesign sponsor button

Author: Sahilshrma31

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:border-[#2f78c4] hover:bg-[#2f78c4] hover:text-white hover:shadow-[0_8px_18px_rgba(47,120,196,0.28)] dark:text-[#4fa8ff] dark:border-[#4fa8ff] dark:hover:border-[#4fa8ff] dark:hover:bg-[#2f78c4] dark:hover:text-white"
+              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>