mira, tengo esto:

import React, { useState } from "react";
import { AiOutlineHome, AiOutlineUser } from "react-icons/ai";
import { BiBook, BiMessageSquareDetail } from "react-icons/bi";
import { RiServiceLine } from "react-icons/ri";
import { FaEnvelope } from "react-icons/fa";

import "./topbar.css";

const Topbar = ({ language }) => {
  const [activeNav, setActiveNav] = useState("#home");

  const content = {
    en: {
      home: "Home",
      about: "About",
      skills: "Skills",
      portfolio: "Portfolio",
      contact: "Contact",
      contactMe: "Contact Me",
    },
    es: {
      home: "Inicio",
      about: "Sobre mí",
      skills: "Habilidades",
      portfolio: "Portafolio",
      contact: "Contacto",
      contactMe: "Contáctame",
    },
  };

  return (
    <nav className="topbar-nav">
      <a
        href="#home"
        onClick={() => setActiveNav("#home")}
        className={activeNav === "#home" ? "active" : ""}
        aria-label={content[language].home}
      >
        <AiOutlineHome />
      </a>
      <a
        href="#about"
        onClick={() => setActiveNav("#about")}
        className={activeNav === "#about" ? "active" : ""}
        aria-label={content[language].about}
      >
        <AiOutlineUser />
      </a>
      <a
        href="#experience"
        onClick={() => setActiveNav("#experience")}
        className={activeNav === "#experience" ? "active" : ""}
        aria-label={content[language].skills}
      >
        <BiBook />
      </a>
      <a
        href="#portfolio"
        onClick={() => setActiveNav("#portfolio")}
        className={activeNav === "#portfolio" ? "active" : ""}
        aria-label={content[language].portfolio}
      >
        <RiServiceLine />
      </a>
      <a
        href="#contact"
        onClick={() => setActiveNav("#contact")}
        className={activeNav === "#contact" ? "active" : ""}
        aria-label={content[language].contact}
      >
        <BiMessageSquareDetail />
      </a>
      {/* Botón "Contáctame" con icono */}
      <a
        href="#contact"
        className="topbar-contact-button"
        aria-label={content[language].contactMe}
      >
        <FaEnvelope className="contact-button__icon" />
        <span className="contact-button__text">
          {content[language].contactMe}
        </span>
      </a>
    </nav>
  );
};

export default Topbar;

mira mi css:

/* src/components/topbar/topbar.css */

.topbar-nav {
  background: rgba(0, 0, 0, 0.3);
  width: max-content;
  display: flex;
  align-items: center;
  padding: 0.7rem 1.7rem;
  z-index: 2;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2rem;
  gap: 0.8rem;
  border-radius: 3rem;
  backdrop-filter: blur(15px);
}

.topbar-nav a {
  background: transparent;
  padding: 0.9rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-light);
  font-size: 1.1rem;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.topbar-nav a:hover {
  background: rgba(0, 0, 0, 0.3);
}

.topbar-nav a.active {
  background: var(--color-bg);
  color: var(--color-white);
}

/* Estilos para el botón "Contáctame" */
.topbar-contact-button {
  padding: 0.4rem 0.8rem;
  border: 2px solid;
  border-radius: 8px;
  color: #fff;
  font-size: 0.8rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;

  /* Gráfico en el borde */
  border-image: linear-gradient(45deg, #a64ac9, #00c6ff, #a64ac9) 1;

  /* Sombra para efecto de neón */
  box-shadow: 0 0 3px #a64ac9, 0 0 6px #a64ac9, 0 0 12px #a64ac9,
    0 0 24px #00c6ff, 0 0 48px #00c6ff;

  /* Animación inicial */
  animation: neonGlow 3s infinite;
  display: flex;
  align-items: center;
}

.contact-button__icon {
  margin-right: 0.3rem;
  font-size: 1rem;
}

.contact-button__text {
  display: none; /* Ocultar el texto por defecto */
}

@keyframes neonGlow {
  0% {
    border-image: linear-gradient(45deg, #a64ac9, #00c6ff, #a64ac9) 1;
    box-shadow: 0 0 3px #a64ac9, 0 0 6px #a64ac9, 0 0 12px #a64ac9,
      0 0 24px #00c6ff, 0 0 48px #00c6ff;
  }
  50% {
    border-image: linear-gradient(45deg, #00c6ff, #a64ac9, #00c6ff) 1;
    box-shadow: 0 0 3px #00c6ff, 0 0 6px #00c6ff, 0 0 12px #00c6ff,
      0 0 24px #a64ac9, 0 0 48px #a64ac9;
  }
  100% {
    border-image: linear-gradient(45deg, #a64ac9, #00c6ff, #a64ac9) 1;
    box-shadow: 0 0 3px #a64ac9, 0 0 6px #a64ac9, 0 0 12px #a64ac9,
      0 0 24px #00c6ff, 0 0 48px #00c6ff;
  }
}

.topbar-contact-button:hover {
  box-shadow: 0 0 6px #a64ac9, 0 0 12px #a64ac9, 0 0 24px #a64ac9,
    0 0 48px #00c6ff, 0 0 96px #00c6ff;
  transform: scale(1.05);
}

/* Mostrar el texto en pantallas más grandes */
@media screen and (min-width: 600px) {
  .topbar-contact-button .contact-button__text {
    display: inline;
  }
}

/* Ajustes para dispositivos medianos */
@media screen and (max-width: 768px) {
  .topbar-contact-button {
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
    margin-left: 0.5rem;
  }

  .contact-button__icon {
    font-size: 0.9rem;
  }

  .contact-button__text {
    display: none; /* Mantener el texto oculto en pantallas medianas */
  }
}

/* Ajustes para dispositivos muy pequeños */
@media screen and (max-width: 480px) {
  .topbar-contact-button {
    padding: 0.2rem 0.5rem;
    font-size: 0.6rem;
    margin-left: 0.3rem;
  }

  .contact-button__icon {
    display: none; /* Ocultar icono en pantallas muy pequeñas */
  }

  .contact-button__text {
    display: none;
  }
}

necesito cuadrar el boton, no lo quiero adentro de todas las opciones, si no que lo quiero arriba del topbar a la derecha, que tenga redondeado, me hago entender?