mira, tengo esto:

import React, { useState } from "react";
import CTA from "./CTA";
import HeaderSocials from "./HeaderSocials";
import "./header.css";

const Header = ({ language, onLanguageChange }) => {
  const content = {
    en: {
      greeting: "Hello I'm",
      name: "Johan Morales",
      title: "Full Stack Developer",
      scrollDown: "Scroll Down",
    },
    es: {
      greeting: "Hola, soy",
      name: "Johan Morales",
      title: "Desarrollador Full Stack",
      scrollDown: "Desplazarse hacia abajo",
    },
  };

  return (
    <header id="home">
      <div className="container header__container">
        <div className="language-buttons">
          <button
            onClick={() => onLanguageChange("en")}
            className={`btn ${language === "en" ? "active" : ""}`}
          >
            <img
              src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Flag_of_the_United_States.svg/1024px-Flag_of_the_United_States.svg.png"
              alt="English"
              style={{ width: "20px", height: "15px" }}
            />
          </button>
          <button
            onClick={() => onLanguageChange("es")}
            className={`btn ${language === "es" ? "active" : ""}`}
          >
            <img
              src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Bandera_de_Espa%C3%B1a.svg/1200px-Bandera_de_Espa%C3%B1a.svg.png"
              alt="Español"
              style={{ width: "20px", height: "15px" }}
            />
          </button>
        </div>
        <h5>{content[language].greeting}</h5>
        <h1>{content[language].name}</h1>
        <h5 className="text-light">{content[language].title}</h5>
        <CTA language={language} />
        <a href="#contact" className="scroll__down">
          {content[language].scrollDown}
        </a>
        <HeaderSocials language={language} />
      </div>
    </header>
  );
};

export default Header;

y el css es este:

header {
  height: 100%;
  padding-top: 7rem;
  overflow: hidden;
}

.header__container {
  text-align: center;
  height: 100%;
  position: relative;
}

.cta {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 2.5rem;
}

.cta .btn {
  display: inline-block;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  font-size: 16px;
  border: 2px solid transparent;
  border-radius: 5px;
  background-color: #97a0aa00;
  position: relative;
  transition: color 0.3s ease, box-shadow 0.3s ease; /* Añadir transición para box-shadow */
  box-shadow: 0 0 5px #00c3ff, 0 0 10px #00c3ff, 0 0 15px #00c3ff;
  margin-bottom: 20px;
  animation: neonGlow 3s infinite alternate;
}
.cta .btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  padding: 2px;
  background: linear-gradient(45deg, #00c3ff, #800080);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  transition: opacity 0.3s ease;
  opacity: 0.5;
  animation: neonGradient 3s infinite alternate;
}

.cta .btn:hover::before {
  opacity: 1;
}

.cta .btn:hover {
  color: #00c3ff;
  box-shadow: 0 0 20px #00c3ff, 0 0 20px #00c3ff, 0 0 30px #00c3ff;
}

.header__socials {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  position: absolute;
  left: 5rem;
  bottom: 1rem;
}

.header__socials::after {
  content: "";
  width: 1px;
  height: 2rem;
  background: var(--color-primary);
}

.scroll__down {
  position: absolute;
  right: 5rem;
  bottom: 5rem;
  transform: rotate(90deg);
  font-weight: 300;
  font-size: 0.9rem;
}

.language-buttons {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.language-buttons button {
  font-size: 0.6rem;
  padding: 0.2rem 0.5rem;
}

@media screen and (max-width: 1024px) {
  header {
    padding-top: 3rem;
  }

  section {
    margin-top: 6rem;
  }
}

@media screen and (max-width: 600px) {
  .header__socials,
  .scroll__down {
    display: none;
  }
}

@keyframes neonGlow {
  0% {
    box-shadow: 0 0 5px #00c3ff, 0 0 10px #00c3ff, 0 0 15px #00c3ff;
  }
  100% {
    box-shadow: 0 0 5px #800080, 0 0 10px #800080, 0 0 15px #800080;
  }
}

@keyframes neonGradient {
  0% {
    background: linear-gradient(45deg, #00c3ff, #800080);
  }
  100% {
    background: linear-gradient(45deg, #800080, #00c3ff);
  }
}

necesito que los botones de ingles y español tenga un neon en los botones, como especie de un resplandor, que el boton de ingles tenga los colores de usa y el de español tenga los colores de españa