Question 44175 in Html Question posted in
Some basic documentation can be found here.

How do i customize this button in my login page? – Html

#button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50px;}
  
  .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;
}
</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="Youe 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>

The buttonIam a beginner at html and css and im trying to create a login page as my first project but this button for some reasons doesnt seems to be going along with what i want. If someone could help me just some minor adjustments not anything to fancy such as annimations and stuff , just to match with what ive already did.

Ive tried using some stuff i found online but it just seems to put a border around it nothing else.

Tags:

2

Answers


  1. 0

    try this if you like

    /* CSS for desktop screens */

/* main container */
.sign-up {
  max-width: 500px;
  margin: 0 auto;
}

/* input fields */
input[type="email"],
input[type="password"],
input[type="number"],
input[type="range"] {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* submit button */
input[type="submit"] {
  display: block;
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: none;
  border-radius: 5px;
  background-color: #008CBA;
  color: white;
  cursor: pointer;
}

/* CSS for mobile screens */

@media screen and (max-width: 480px) {
  /* main container */
  .sign-up {
    max-width: none;
    padding: 10px;
  }

  /* input fields */
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="range"] {
    margin: 5px 0;
  }

  /* submit button */
  input[type="submit"] {
    margin: 5px 0;
  }
}

    </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="Youe 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>
    Login or Signup to reply.
  2. 0

    u need to use the tag button instead of the div and change the colors and what u want also use the :hover and transition to animate ur button . to develop ur level u need to work on real projects just go to figma community and choose a UI design and try to do it with HTML CSS. good luck
    check this out :

    button {
  background-color: lightcoral;
  padding: 8px 30px;
  margin-top: 25px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s;
}

button:hover{
  background-color: lightgray;
}

  
  .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;
}
    </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="Youe 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>
<button>send</button>
</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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search