如何自定义登录页面中的按钮？HTML/CSS新手技术求助

问题根源 #

你把CSS样式写在了<div id="button">这个容器上，但实际的提交按钮是容器内的<input type="submit">元素，导致样式没有作用到按钮本身。

修改后的代码 #

CSS 代码

/* 直接给提交按钮设置样式 */
#button input[type="submit"] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50px;
  width: 100%; /* 让按钮适配登录框宽度，视觉更统一 */
}

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

/* 可选：给输入框加基础样式，让页面更协调 */
#username input, #password input {
  margin: 8px 0;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #04AA6D;
  width: 100%;
  box-sizing: border-box;
}

HTML 代码（无需调整结构，保持原样即可）

</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="Your 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>

效果说明 #

• 核心改动是将样式目标指向实际的按钮元素，确保样式生效
• width: 100%让按钮填满登录框宽度，和现有绿色主题的登录框更适配
• 可选的输入框样式是为了让页面整体风格统一，没有复杂动画，完全符合你的需求

内容的提问来源于stack exchange，提问作者Noel Kasemi