mira, tengo esto:

import React, { useState, useEffect } from "react";
import { BsFillPatchCheckFill } from "react-icons/bs";
import { VscFolderLibrary } from "react-icons/vsc";
import "./experience.css";

const Experience = ({ language }) => {
  useEffect(() => {
    const cards = document.querySelectorAll(".experience__container > div");

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("show");
        } else {
          entry.target.classList.remove("show");
        }
      });
    });

    cards.forEach((card) => observer.observe(card));

    return () => observer.disconnect();
  }, []);

  const content = {
    en: {
      skillsIHave: "The Skills I Have",
      skills: "Skills",
      frontEnd: "Front-end Development",
      html: "HTML",
      css: "CSS",
      javascript: "JavaScript",
      java: "Java",
      kotlin: "Kotlin",
      python: "Python",
      backEnd: "Back-end Development",
      docker: "Docker",
      liquibase: "Liquibase",
      postgresql: "PostgreSQL",
      mysql: "MySql",
      swagger: "Swagger",
      gitlab: "GitLab",
      gitgithub: "Git/GitHub",
      frameworks: "Frameworks",
      angular: "Angular",
      springboot: "Spring Boot",
      bootstrap: "Bootstrap",
      tailwind: "Tailwind",
      react: "React",
      thymeleaf: "Thymeleaf",
      others: "Others",
      scrum: "SCRUM",
      query: "Query",
      microservices: "Microservices",
      nodejs: "Node.js",
      api: "API",
      pylint: "Pylint",
      black: "Black",
      showCertificates: "Show Certificates",
      hideCertificates: "Hide Certificates",
      softwareEngineerCertificate: "Software Engineer Certificate",
      viewCertificate: "View Certificate",
      angularCertificate: "Angular (Intermediate) Certificate",
      sqlCertificate: "SQL (Advanced) Certificate",
      scrumCertificate: "Scrum Fundamentals Certified (SFC™)",
      frontendReactCertificate: "Frontend Developer (React) Certificate",
      restAPICertificate: "Rest API (Intermediate) Certificate",
      javascriptCertificate: "JavaScript (Intermediate) Certificate",
    },
    es: {
      skillsIHave: "Las habilidades que tengo",
      skills: "Habilidades",
      frontEnd: "Desarrollo Front-end",
      html: "HTML",
      css: "CSS",
      javascript: "JavaScript",
      java: "Java",
      kotlin: "Kotlin",
      python: "Python",
      backEnd: "Desarrollo Back-end",
      docker: "Docker",
      liquibase: "Liquibase",
      postgresql: "PostgreSQL",
      mysql: "MySql",
      swagger: "Swagger",
      gitlab: "GitLab",
      gitgithub: "Git/GitHub",
      frameworks: "Frameworks",
      angular: "Angular",
      springboot: "Spring Boot",
      bootstrap: "Bootstrap",
      tailwind: "Tailwind",
      react: "React",
      thymeleaf: "Thymeleaf",
      others: "Otros",
      scrum: "SCRUM",
      query: "Query",
      microservices: "Microservicios",
      nodejs: "Node.js",
      api: "API",
      pylint: "Pylint",
      black: "Black",
      showCertificates: "Mostrar Certificados",
      hideCertificates: "Ocultar Certificados",
      softwareEngineerCertificate: "Certificado de Ingeniero de Software",
      viewCertificate: "Ver Certificado",
      angularCertificate: "Certificado de Angular (Intermedio)",
      sqlCertificate: "Certificado de SQL (Avanzado)",
      scrumCertificate: "Scrum Fundamentals Certified (SFC™)",
      frontendReactCertificate: "Certificado de Desarrollador Frontend (React)",
      restAPICertificate: "Certificado de Rest API (Intermedio)",
      javascriptCertificate: "Certificado de JavaScript (Intermedio)",
    },
  };

  const [showCertificates, setShowCertificates] = useState(false);

  const toggleCertificates = () => {
    setShowCertificates(!showCertificates);
  };

  return (
    <section id="experience">
      <h5>{content[language].skillsIHave}</h5>
      <h2>{content[language].skills}</h2>
      <div className="container experience__container">
        <div className="experience__frontend">
          <h3>{content[language].frontEnd}</h3>
          <div className="experience__content">
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].html}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].css}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].javascript}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].java}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].kotlin}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].python}</h4>
            </article>
          </div>
        </div>
        <div className="experience__backend">
          <h3>{content[language].backEnd}</h3>
          <div className="experience__content">
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].docker}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].liquibase}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].postgresql}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].mysql}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].swagger}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].gitlab}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].gitgithub}</h4>
            </article>
          </div>
        </div>
        <div className="experience__frameworks">
          <h3>{content[language].frameworks}</h3>
          <div className="experience__content">
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].angular}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].springboot}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].bootstrap}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].tailwind}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].react}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].thymeleaf}</h4>
            </article>
          </div>
        </div>
        <div className="experience__others">
          <h3>{content[language].others}</h3>
          <div className="experience__content">
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].scrum}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].query}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].microservices}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].nodejs}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].api}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].pylint}</h4>
            </article>
            <article className="experience__details">
              <BsFillPatchCheckFill className="experience__details-icon" />
              <h4>{content[language].black}</h4>
            </article>
          </div>
        </div>
      </div>

      {/* Botón para ver/ocultar certificados */}
      <div className="experience__certificates-button">
        {" "}
        <button onClick={toggleCertificates} className="btn btn-secondary">
          {showCertificates
            ? content[language].hideCertificates
            : content[language].showCertificates}
        </button>
      </div>

      {/* Certificados */}
      {showCertificates && (
        <div className="experience__certificates">
          <article className="experience__card">
            <VscFolderLibrary className="experience__icon" />
            <h5>{content[language].softwareEngineerCertificate}</h5>
            <small>
              <a
                href="https://www.hackerrank.com/certificates/c1ce3120f28a"
                target="_blank"
                rel="noopener noreferrer"
              >
                {content[language].viewCertificate}
              </a>
            </small>
          </article>
          <article className="experience__card">
            <VscFolderLibrary className="experience__icon" />
            <h5>{content[language].frontendReactCertificate}</h5>
            <small>
              <a
                href="https://www.hackerrank.com/certificates/59900afd316e"
                target="_blank"
                rel="noopener noreferrer"
              >
                {content[language].viewCertificate}
              </a>
            </small>
          </article>
          <article className="experience__card">
            <VscFolderLibrary className="experience__icon" />
            <h5>{content[language].angularCertificate}</h5>
            <small>
              <a
                href="https://www.hackerrank.com/certificates/f1287cbae472"
                target="_blank"
                rel="noopener noreferrer"
              >
                {content[language].viewCertificate}
              </a>
            </small>
          </article>
          <article className="experience__card">
            <VscFolderLibrary className="experience__icon" />
            <h5>{content[language].sqlCertificate}</h5>
            <small>
              <a
                href="https://www.hackerrank.com/certificates/07877ed75494"
                target="_blank"
                rel="noopener noreferrer"
              >
                {content[language].viewCertificate}
              </a>
            </small>
          </article>
          <article className="experience__card">
            <VscFolderLibrary className="experience__icon" />
            <h5>{content[language].restAPICertificate}</h5>
            <small>
              <a
                href="https://www.hackerrank.com/certificates/6f9c7aa851a9"
                target="_blank"
                rel="noopener noreferrer"
              >
                {content[language].viewCertificate}
              </a>
            </small>
          </article>
          <article className="experience__card">
            <VscFolderLibrary className="experience__icon" />
            <h5>{content[language].javascriptCertificate}</h5>
            <small>
              <a
                href="https://www.hackerrank.com/certificates/bcd1918a93d0"
                target="_blank"
                rel="noopener noreferrer"
              >
                {content[language].viewCertificate}
              </a>
            </small>
          </article>
          <article className="experience__card">
            <VscFolderLibrary className="experience__icon" />
            <h5>{content[language].scrumCertificate}</h5>
            <small>
              <a
                href="https://www.scrumstudy.com/certification/verify?type=SFC&number=978278"
                target="_blank"
                rel="noopener noreferrer"
              >
                {content[language].viewCertificate}
              </a>
            </small>
          </article>
        </div>
      )}
    </section>
  );
};

export default Experience;

mira mi css:

.experience__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  justify-content: center;
}

.experience__container > div {
  background: var(--color-bg-variant);
  padding: 1.5rem 2.5rem;
  border-radius: 2rem;
  border: 1px solid transparent;
  transition: var(--transition);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.experience__container > div:hover {
  background: transparent;
  border-color: var(--color-primary-variant);
  cursor: default;
}

.experience__container > div h3 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--color-primary);
  font-size: 1.1rem;
}

.experience__container > div.show {
  opacity: 1;
  transform: translateY(0);
}

.experience__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 1.5rem;
}

.experience__details {
  display: flex;
  gap: 0.8rem;
  animation: fadeInUp 0.5s ease-in-out;
}

.experience__details-icon {
  margin-top: 6px;
  color: var(--color-primary);
  font-size: 1.2rem;
}

.experience__certificates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.experience__card {
  background: var(--color-bg-variant);
  border: 1px solid transparent;
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  transition: var(--transition);
}

.experience__card:hover {
  background: transparent;
  border-color: var(--color-primary-variant);
  cursor: default;
}

.experience__icon {
  color: var(--color-primary);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.experience__card h5 {
  font-size: 1rem;
}

.experience__card small {
  font-size: 0.9rem;
  color: var(--color-light);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 1024px) {
  .experience__container {
    grid-template-columns: 1fr;
  }

  .experience__container > div {
    width: 80%;
    margin: 0 auto;
    padding: 2rem;
  }

  .experience__content p {
    padding: 1rem;
  }

  .experience__certificates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .experience__card {
    background: var(--color-bg-variant);
    border: 1px solid transparent;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    transition: var(--transition);
  }

  .experience__card:hover {
    background: transparent;
    border-color: var(--color-primary-variant);
    cursor: default;
  }

  .experience__icon {
    color: var(--color-primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .experience__card h5 {
    font-size: 1rem;
  }

  .experience__card small {
    font-size: 0.9rem;
    color: var(--color-light);
  }
}

.experience__certificates-button {
  display: block;
  margin: 2rem auto 0;
  text-align: center;
}

@media screen and (max-width: 600px) {
  .experience__container {
    gap: 1rem;
  }

  .experience__container > div {
    width: 100%;
    padding: 2rem 1rem;
  }

  .experience__certificates {
    grid-template-columns: 1fr;
  }
}

necesito que tenga las mismas cosas de neon en los bordes y atras que el boton de dowloand cv:

import React 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 btn-english ${language === "en" ? "active" : ""}`}
          >
            English
          </button>
          <button
            onClick={() => onLanguageChange("es")}
            className={`btn btn-spanish ${language === "es" ? "active" : ""}`}
          >
            Español
          </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;

mira el css:

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;
  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;
  gap: 0.3rem;
  margin-bottom: 3rem;
}

.language-buttons button {
  position: relative;
  font-size: 0.6rem;
  padding: 0.5rem;
  border: none;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-left: 0.1rem;
  font-weight: bold;
}

.language-buttons button:first-child {
  margin-left: 0;
}

.language-buttons button:hover {
  transform: scale(1.1);
}

.btn {
  color: white;
  outline: none;
}

.btn-english::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 5px;
  background: linear-gradient(45deg, white, blue);
  z-index: -1;
  opacity: 0.7;
  box-shadow: 0 0 10px, 0 0 20px white, 0 0 30px blue;
  animation: neonPulseEn 3s infinite alternate;
}

.btn-spanish::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 5px;
  background: linear-gradient(45deg, red, yellow);
  z-index: -1;
  opacity: 0.7;
  box-shadow: 0 0 10px red, 0 0 20px yellow, 0 0 30px red;
  animation: neonPulseEs 3s infinite alternate;
}

.btn-english.active::before,
.btn-spanish.active::before {
  opacity: 1;
}

@keyframes neonPulseEn {
  from {
    box-shadow: 0 0 10px red, 0 0 20px white, 0 0 30px blue;
  }
  to {
    box-shadow: 0 0 20px red, 0 0 30px white, 0 0 40px blue;
  }
}

@keyframes neonPulseEs {
  from {
    box-shadow: 0 0 10px, 0 0 20px yellow, 0 0 30px red;
  }
  to {
    box-shadow: 0 0 20px, 0 0 30px yellow, 0 0 40px red;
  }
}

@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);
  }
}