How do i customize this button in my login page?

Question

#button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50px;}
  
  .sign-up {
  border: 14px solid #00f535;
  width: 200px;
  height: 300px;
  border-radius: 50px;
  position: relative;
  margin: 50px auto;
  text-align: center;
  padding: 50px;
  background-color: #b6f1c3;
  z-index: 1;
}

</section>
<form action="/anth/">
  <div class="sign-up">
    <div id="name">
  <h3>Sign up</h3>
</div>
  <div id="username">
  <label for="username">Username</label>
  <input type="email" name="username" placeholder="Youe name" id="username" required pattern="[a-zA-Z]+">
</div>
<div id="password">
  <label for="usr-pass">Password</label>
  <input type="password" name="pass" id="usr-pass" placeholder="Password" required pattern="[a-zA-Z0-9]+">
</div>
<div id="button">
  <input type="submit" value="send">
</div>
</div>
  <section class="useless">
  <br><br><br>
  <label for="age">Your age</label>
  <input type="number" name="num" step="1" id="age" placeholder="1-100" required min="1" max="100">
  <br>
  <input type="submit" value="send">
  <br><br>
  <label for="vol">volume</label>
  <input type="range" name="volume" id="vol" min="0" max="100" step="5">
  <div>
<br>
</section>

The buttonIam a beginner at html and css and im trying to create a login page as my first project but this button for some reasons doesnt seems to be going along with what i want. If someone could help me just some minor adjustments not anything to fancy such as annimations and stuff , just to match with what ive already did.

Ive tried using some stuff i found online but it just seems to put a border around it nothing else.

Answer 1

try this if you like

/* CSS for desktop screens */

/* main container */
.sign-up {
  max-width: 500px;
  margin: 0 auto;
}

/* input fields */
input[type="email"],
input[type="password"],
input[type="number"],
input[type="range"] {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* submit button */
input[type="submit"] {
  display: block;
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: none;
  border-radius: 5px;
  background-color: #008CBA;
  color: white;
  cursor: pointer;
}

/* CSS for mobile screens */

@media screen and (max-width: 480px) {
  /* main container */
  .sign-up {
    max-width: none;
    padding: 10px;
  }

  /* input fields */
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="range"] {
    margin: 5px 0;
  }

  /* submit button */
  input[type="submit"] {
    margin: 5px 0;
  }
}

</section>
<form action="/anth/">
  <div class="sign-up">
    <div id="name">
  <h3>Sign up</h3>
</div>
  <div id="username">
  <label for="username">Username</label>
  <input type="email" name="username" placeholder="Youe name" id="username" required pattern="[a-zA-Z]+">
</div>
<div id="password">
  <label for="usr-pass">Password</label>
  <input type="password" name="pass" id="usr-pass" placeholder="Password" required pattern="[a-zA-Z0-9]+">
</div>
<div id="button">
  <input type="submit" value="send">
</div>
</div>
  <section class="useless">
  <br><br><br>
  <label for="age">Your age</label>
  <input type="number" name="num" step="1" id="age" placeholder="1-100" required min="1" max="100">
  <br>
  <input type="submit" value="send">
  <br><br>
  <label for="vol">volume</label>
  <input type="range" name="volume" id="vol" min="0" max="100" step="5">
  <div>
<br>
</section>