如何在我的登录页面自定义这个按钮？

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>

我是 html 和 css 的初学者，我试图创建一个登录页面作为我的第一个项目，但由于某些原因，这个按钮似乎与我想要的不一致。如果有人能帮我做一些小的调整，而不是任何花哨的东西，比如动画之类的，只是为了与我已经做过的相匹配。

我试过使用我在网上找到的一些东西，但它似乎只是在它周围设置了一个边界。