试图设计一个按钮但不会工作

Question

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

我想在个人资料页面上设置新帖子，联系我和注销按钮的样式，与登录框上的登录按钮相同，如下所示：

这个的代码和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代码设置Logout链接的样式，例如Login按钮。

#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

我改变了一些小事：

• 我已将您的ID放在您的元素上，而不是父div
• 我添加了一些额外的css以确保它覆盖默认的标签样式（即下划线）
• 我为你的元素使用了相同的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>

Answer 3

与提到的ṧнʊß一样，＃subsmit，＃newspos和#logout输入不是输入 - 它们是div，因此他们不会使用＆＃34;输入类型=提交＆＃34; CSS规则。

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

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

然而，将CSS规则本身更改为某种类可能更有意义：

.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这个类：

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

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>