Search code examples
htmlcssstylesheet

Trying to style a button but wont work


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:

Login Box

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.

enter image description here


Solution

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