UI 问题：边框半径、按钮功能、对齐方式和颜色理论实现、Enter_container半径

问：

我想将边框对齐显示“Entrar”的位置，如果用户存在，“Entrar”按钮也需要登录。“Novo Aqui？”按钮不会重定向到另一个名为“Cadastro”的页面，看起来也不像一个按钮;当有人将鼠标悬停在它上面时，它只会改变字母的颜色。我希望它重定向到另一个页面，在本例中为“注册”，并在用户将鼠标悬停在其上时使用颜色理论更改颜色。

我试着把“Novo Aqui？”按钮向右对齐，但我迷路了，因为有太多的div和规则。在这个按钮上，我试图像按钮一样重定向到另一个页面，但它看起来仍然不像一个按钮;它显示为未格式化的重定向链接。我试图绕过右角边框，但我没有成功。我尝试使用！important，但没有成功。“Entrar”按钮的左侧没有圆角边框，只有右侧的边框，如果存在具有该电子邮件和密码的用户，它应该会登录。

我试着把“Novo Aqui？”按钮向右对齐，但我迷路了，因为有太多的div和规则。在这个按钮上，我试图像按钮一样重定向到另一个页面，但它看起来仍然不像一个按钮;它显示为未格式化的重定向链接。我试图绕过“enter_container”所在的右角边框，但我没有成功。我尝试使用！important，但没有成功。一切都是用葡萄牙语（pt-br）写的：“Entrar”与“Sign in”相同，“Novo Aqui？”与“New Here”相同。

import { useState } from 'react';
import { Link } from 'react-router-dom';
import styles from './Entrar.module.css';

const Entrar = () => {
  const [dados, setDados] = useState({
    email: '',
    senha: '',
  });

  const [erro, setErro] = useState("");

  const handleMudar = ({ currentTarget: input }) => {
    setDados({ ...dados, [input.name]: input.value });
  };

  const handleEnviar = async (e) => {
    e.preventDefault();
    try {
      const url = 'http://localhost:5555/autenticarRotas';
      const { data: resultado } = await axios.post(url, dados);
      localStorage.setItem('token', resultado.token);
      window.location = "/";
    } catch (erro) {
      if (
        erro.response && erro.response.status >= 400 &&
        erro.response.status <= 500
      ) {
        setErro(erro.response.data.message);
      }
    }
  }

  return (
    <div className={styles.entrar_container}>
      <div className={styles.entrar}>
        <div className={styles.left}>
          <form onSubmit={handleEnviar} className={styles.form}>
            <h1>Entrar</h1>
            <input
              type="email"
              placeholder="Email"
              name='email'
              onChange={handleMudar}
              value={dados.email}
              required
              className={styles.input}
            />
            <input
              type="password"
              placeholder="Senha"
              name='senha' // Changed to 'senha' from 'password'
              onChange={handleMudar}
              value={dados.senha}
              required
              className={styles.input}
            />
            {erro && <div className={styles.erro_msg}>{erro}</div>}
            <div className={styles.button_container}>
              <button type="submit" className={styles.entrar_btn}>
                Entrar
              </button>
            </div>
            <div className={styles.button_container}>
              <button className={styles.novo_aqui_btn} onClick={() => navigate("/cadastrar")}>
                Novo Aqui?
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

export default Entrar;

    /* Create all the fields components that exist in the file Entrar.jsx */
/* General Styles */
.entrar_container {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
  }
  
  /* Left Side - Introduction */
  .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: linear-gradient(to bottom, #3bb19b, #318994);
    color: #fff;
    padding: 30px;
  }
  
  .left h1 {
    font-size: 3rem;
    margin-top: 0;
    text-align: center;
    border-radius: 20px;
  }
  
  /* Right Side - Registration Form */
  .right {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 10px;
    /* Changed to top-left */
    border-bottom-left-radius: 10px;
    /* Changed to bottom-left */
    background-color: #fff;
    padding: 30px;
  }
  
  .right form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  /* Input Styles */
  .input {
    outline: none;
    border: 2px solid #ccc;
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    margin: 10px 0;
    font-size: 1.1rem;
  }
  
  .form input {
    color: black;
  }
  
  /* Error Message Styles */
  .erro_msg {
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    font-size: 1rem;
    background-color: #f34646;
    color: #fff;
    border-radius: 5px;
    text-align: center;
  }
  
  .button_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /* Button Styles */
  .entrar_btn {
    color: white;
    background-color: #007bff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px; /* Rounded edges */
  }
  
  .entrar_btn:hover {
    background-color: #0056b3;
  }
  
  .novo_aqui_btn {
    color: white; /* Text color is white */
    text-decoration: none;
    transition: color 0.3s ease;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px; /* Rounded edges */
  }
  
  .novo_aqui_btn:hover {
    color: #0056b3;
  }