尝试设置按钮样式但不起作用

Question

我正在为我的网站设计个人资料页面的样式。

我想在配置文件页面上为新建 Post、联系我和注销按钮设置与登录框上的登录按钮相同的样式，如下所示：

这个的代码和CSS是这样的

代码：

    input[type=submit] {
      width: 100%;
      background: #28343b;
      color: #ffffff;
      border: 1px solid #000;
      padding: 10px;
      font-size: 20px;
      cursor: pointer;
      border-radius: 5px;
      margin-bottom: 1px;
    }

<form action="" method="post">

  <div id="loginbox">

    <label>Username:</label>

    <input type="text" name="username" id="name" placeholder="Username" />
    <br />
    <br />

    <label>Password:</label>

    <input type="password" name="password" id="password" placeholder="**********" />
    <br/>
    <br />

    <input type="submit" value=" Login " name="submit" />
    <br />

    <span></span>

</form>

</div>

我已经在下面指出了我想用相同的按钮格式设置样式的项目。我需要在 CSS 中添加什么（以及对 HTML 的任何更改）才能使这些项目具有相同的样式？

<div id="login">

<h2>Welcome:</h2>

<hr/>

<form action="" method="post">

<div id="loginbox">

<div id="submit"> <a href="cms/contact.php"> Contact Me </a> </div> <----- THIS ONE

<div id="newpost"> <a href="cms/index.php"> Make a New Post </a> </div> <----- THIS ONE

<div id="logout"><a href="logout.php">Log Out</a></div> <----- THIS ONE

<span></span>

</form>

</div>

目前看起来是这样的。

Answer 1

使用此 css 代码将您的注销 link 设置为类似登录按钮的样式。

#logout{
  width: 100%;
  background: #28343b;
  border: 1px solid #000;
  padding: 10px;
  font-size:20px;
  cursor:pointer;
  border-radius: 5px;
  margin-bottom: 1px;
  text-align:center;
  font-weight:bold;
}

#logout a { /*all font customizations goes here*/
  color: #fff;
  text-decoration: none;
}

检查结果here

Answer 2

如所述，#submit、#newpost 和 #logout 输入不是输入 - 它们是 div，因此它们不会使用 "input type=submit" CSS规则。

如果您想将这些更改为将继承 CSS 规则的输入，那么您可以像这样转换它们：

<input id="submit" src="cms/contact.php" value="Contact Me" type="submit"/>

然而，将 CSS 规则本身更改为某种 class:

可能更有意义

.fancyButton {
  width: 100%;
  background: #28343b;
  border: 1px solid #000;
  padding: 10px;
  font-size:20px;
  cursor:pointer;
  border-radius: 5px;
  margin-bottom: 1px;
  text-align:center;
  font-weight:bold;
}

并给这些 <input> 中的每一个 div 这个 class:

<input id="logout" class="fancyButton">

Answer 3

试试这个：

#submit,#newpost,#logout {
  width: calc(100% - 40px);
  background: #28343b;
  color: #ffffff;
  border: 1px solid #000;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 1px;
   text-align:center;
}
a{
  color:white;
  text-decoration:none;
 
}

<div id="login">

  <h2>Welcome:</h2>

  <hr/>

  <form action="" method="post">

    <div id="loginbox">

      <div id="submit"> <a href="cms/contact.php"> Contact Me </a> 
      </div>

      <div id="newpost"> <a href="cms/index.php"> Make a New Post </a> 
      </div>
      <div id="logout"><a href="logout.php">Log Out</a>
      </div>

      <span></span>



    </div>

Answer 4

input {
  width: calc(100% - 40px);
  background: #28343b;
  color: #ffffff;
  border: 1px solid #000;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 1px;
  padding: 10px;
}
input[type=submit] {
  width: calc(100% - 20px);
}

<form action="" method="post">

  <div id="loginbox">

    <label>Username:</label>

    <input type="text" name="username" id="name" placeholder="Username" />
    <br />
    <br />

    <label>Password:</label>

    <input type="password" name="password" id="password" placeholder="**********" />
    <br/>
    <br />
    <label></label>
    <input type="submit" value=" Login " name="submit" />
    <br />

    <span></span>
  </div>

</form>

Answer 5

我改变了一些小东西：

我已经将你的 id 放在你的 a 元素上，而不是父 div
我添加了一些额外的 css 以确保它覆盖默认的 a 标签样式（即下划线）
我对你的元素使用了相同的 css（使用逗号分隔它们）

我也已将您的表单样式设置为与您的图片类似，但您可能希望将其更改为更精确。
添加了一个非常简单的悬停效果

这留给你：

input[type=submit],
#submit,
#newpost,
#logout {
  width: 96%;
  background: #28343b;
  color: #ffffff;
  border: 1px solid #000;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 1px;
  text-decoration: none;
  display: block;
  font-family: arial;
  transition: all 0.5s;
}
#login {
  background-color: #109cca;
  padding: 5px;
  border: 2px solid gray;
  border-radius: 10px;
  text-align: center;
}

input[type=submit]:hover,
#submit:hover,
#newpost:hover,
#logout:hover {
  color: #109cca;
}

<div id="login">

  <h2>Welcome:</h2>

  <hr/>

  <form action="" method="post">

    <div id="loginbox">

      <div> <a id="submit" href="cms/contact.php"> Contact Me </a> 
      </div>

      <div> <a id="newpost" href="cms/index.php"> Make a New Post </a> 
      </div>

      <div><a id="logout" href="logout.php">Log Out</a>
      </div>

    </div>
  </form>

尝试设置按钮样式但不起作用

Trying to style a button but wont work

html

css

stylesheet