Trying to style a button but wont work

Question

I'm in the process of styling a profile page for my website.

I want to style the buttons for New Post, Contact Me and Log Out on the Profile Page the same as the Log In button on the Login Box which looks like this:

The code and CSS for this one is like this

Code:

    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>

I have indicated below which are the items I would like to style in this same button format. What would I need to put in the CSS (and any changes to HTML) to style those items the same?

<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>

It currently looks like this.

Answer 1

I've changed a few little things around:

• I've placed your id's onto your a elements, instead of the parent divs
• I've added a little bit of extra css to ensure it overrides the default a tag stylings (i.e. underlining)
• I've used the same css for your elements (using a comma to separate them)

---

• I've also have styled your form similarly to your image, although you may want to alter this to be more precise.
• Added a very simple hover effect

This leave your with this:

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 2

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 3

Try this:

#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

Like ṧнʊß mentioned, the #submit, #newpost, and #logout inputs are not inputs - they're divs, so they're not going to use the "input type=submit" CSS rule.

If you want to change these into inputs that would inherit the CSS rules, then you could convert them like so:

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

It would probably make more sense, however, to change the CSS rule itself to some kind of 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;
}

And to give each of these <input> divs this class:

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

Answer 5

Use this css code to style your Log out link like Login button.

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

Check results here