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

Question

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

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

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

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

Answer 1

我从你的问题中得到的是，你想更改 :hover 上按钮的“边框半径”和“文本”

button {
  color: white;
  background: green;
  border: 0;
  padding: 10px 28px
}

button:hover span {
  display: none
}

button:hover {
  border-radius:0 10px 10px 0;  
  background: red
}

button:hover:before {
  content: "Reply!";
  color: black;
}

<button>
  <span>
    Button
  </span>
</button>

Answer 2

我修复了按钮的 UI 问题，更具体的是下面的代码

Entrar.jsx
import { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import styles from './Entrar.module.css';
import axios from 'axios';

const Entrar = () => {
  const navigate = useNavigate();

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      navigate('/');
    }
  }, [navigate]);

  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/autenticar/';
      const { data: resultado } = await axios.post(url, dados);
      localStorage.setItem('token', resultado.token);
      window.location = "/entrar/home";
    } 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>
              <Link to="/entrar/cadastrar">
              <button className={styles.novo_aqui_btn}>
                Novo Aqui?
              </button>
              </Link>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

export default Entrar;

Entrar.module.css
/* Create all the fields components that exist in the file Entrar.jsx */
/* General Styles */
.entrar_container {
  width: 100%;
  min-height: 100vh;
  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-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;
}

div .entrar_btn {
  border: none;
  padding: 15px;
  border-radius: 10px;
  margin: 10px 0;
  font-size: 1.1rem;
  cursor: pointer;
  background-color: #3bb19b;
}

.entrar_btn:hover {
  background-color: rgb(51, 49, 47);
}

div .novo_aqui_btn {
  background-color: #3bb19b;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.novo_aqui_btn:hover {
  background-color:  rgb(51, 49, 47);
}