Is there a way to align the Login and Register buttons next to each other? I specifically want the Register button to redirect to the register.php page using HTML/CSS

Question

Is there a way to align the Login and Register buttons next to each other? I specifically want the Register button to redirect to the register.php page using HTML/CSS

Is there a way to align login and register buttons side by side using HTML and CSS? I want the register button to redirect to register.php

I attempted to create a register button with the <input> element, but I couldn't get them to display next to each other. Using display:inline; did not work as well.

*{
    font-family: 'Montserrat', sans-serif;

}

body,
html{
    margin: 0px;
    padding: 0px;
    background-color: #0E0E0E;
}

.login-box{
    background-color: #010100;
    width: 400px;
    height: 388px;
    margin: 250px auto;
}

.login-box h1{
    color: #FFFFFF;
    margin:0px 35px;
    margin-bottom: 35px;
    padding-top: 25px;
}

.login-box form input{
    display: block;
    width: 324px;
    height: 50px;
    margin-left: 35px;
    margin-right: 41px;
    margin-bottom: 24px;
}

#submit{
    display: inline;
    color: #010100;
    background-color: #E4FF77;
    border: 2px solid transparent;
    border-radius: 12px;
    width: 150px;
    height: 50px;
    margin-left: 24px;
    margin-right: 41px;
    margin-bottom: 33px;
}

#pwdreset{
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    margin: 20px 0px;
    margin-left: 225px;
}

#register-button {
    display: inline;
    color: #010100;
    background-color: #E4FF77;
    border: 2px solid transparent;
    border-radius: 12px;
    width: 150px;
    height: 50px;
    margin-left: 24px;
    margin-right: 41px;
    margin-bottom: 33px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="signin.css">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
        <title>Agreya - Login</title>
    </head>

    <body>

        <div class="login-box">

            <h1>Login</h1>

            <form class="login-form" action="login.php" method="post">
                <input id="username" type="text" name="username" placeholder="Email" >
                <input id="password" type="password" name="password" placeholder="Password">
                <a id="pwdreset" href="#">Forgot password?</a>
                <input id="submit" type="submit" name="submit" value="Login">
            </form>

            <form action="https://www.w3docs.com/">
                <input id="register-button" type="submit" name="register" value="Register">
            </form>

        </div>

    </body>


</html>

html css authentication

Answer 1

Answer №1

Is this the optimization you seek?

* {
  font-family: 'Montserrat', sans-serif;
}

body,
html {
  margin: 0px;
  padding: 0px;
  background-color: #0E0E0E;
}

.login-box {
  background-color: #010100;
  width: 400px;
  height: 388px;
  margin: 250px auto;
  position: relative;
}

.login-box h1 {
  color: #FFFFFF;
  margin: 0px 35px;
  margin-bottom: 35px;
  padding-top: 25px;
}

.login-box form input {
  display: block;
  width: 324px;
  height: 50px;
  margin-left: 35px;
  margin-right: 41px;
  margin-bottom: 24px;
}

#submit {
  display: inline;
  color: #010100;
  background-color: #E4FF77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  position: absolute;
  bottom: 0;
}

#pwdreset {
  display: block;
  color: #FFFFFF;
  text-decoration: none;
  margin: 20px 0px;
  margin-left: 225px;
}

#register-button {
  display: inline;
  color: #010100;
  background-color: #E4FF77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  position: absolute;
  bottom: 0;
  right: 0;
}

<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

<div class="login-box">

  <h1>Login</h1>

  <form class="login-form" action="login.php" method="post">
    <input id="username" type="text" name="username" placeholder="Email">
    <input id="password" type="password" name="password" placeholder="Password">
    <a id="pwdreset" href="#">Forgot password?</a>
    <input id="submit" type="submit" name="submit" value="Login">
  </form>

  <form action="https://www.w3docs.com/">
    <input id="register-button" type="submit" name="register" value="Register">
  </form>

</div>

Answer 2

Is this the optimization you seek?

* {
  font-family: 'Montserrat', sans-serif;
}

body,
html {
  margin: 0px;
  padding: 0px;
  background-color: #0E0E0E;
}

.login-box {
  background-color: #010100;
  width: 400px;
  height: 388px;
  margin: 250px auto;
  position: relative;
}

.login-box h1 {
  color: #FFFFFF;
  margin: 0px 35px;
  margin-bottom: 35px;
  padding-top: 25px;
}

.login-box form input {
  display: block;
  width: 324px;
  height: 50px;
  margin-left: 35px;
  margin-right: 41px;
  margin-bottom: 24px;
}

#submit {
  display: inline;
  color: #010100;
  background-color: #E4FF77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  position: absolute;
  bottom: 0;
}

#pwdreset {
  display: block;
  color: #FFFFFF;
  text-decoration: none;
  margin: 20px 0px;
  margin-left: 225px;
}

#register-button {
  display: inline;
  color: #010100;
  background-color: #E4FF77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  position: absolute;
  bottom: 0;
  right: 0;
}

<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

<div class="login-box">

  <h1>Login</h1>

  <form class="login-form" action="login.php" method="post">
    <input id="username" type="text" name="username" placeholder="Email">
    <input id="password" type="password" name="password" placeholder="Password">
    <a id="pwdreset" href="#">Forgot password?</a>
    <input id="submit" type="submit" name="submit" value="Login">
  </form>

  <form action="https://www.w3docs.com/">
    <input id="register-button" type="submit" name="register" value="Register">
  </form>

</div>

Answer 3

Answer №2

Utilize the formaction attribute and place both buttons within the same form as shown below.
This code is compliant with HTML5 standards and functions properly in Internet Explorer versions 10 and above.

    <form class="login-form" action="login.php" method="post">
        <input id="username" type="text" name="username" placeholder="Email" >
        <input id="password" type="password" name="password" placeholder="Password">
        <a id="pwdreset" href="#">Forgot password?</a>
        <input id="submit" type="submit" name="submit" value="Login">
        <input formaction="/register.php" id="register-button" type="submit" name="register" value="Register" >
    </form>

Answer 4

Utilize the formaction attribute and place both buttons within the same form as shown below.
This code is compliant with HTML5 standards and functions properly in Internet Explorer versions 10 and above.

    <form class="login-form" action="login.php" method="post">
        <input id="username" type="text" name="username" placeholder="Email" >
        <input id="password" type="password" name="password" placeholder="Password">
        <a id="pwdreset" href="#">Forgot password?</a>
        <input id="submit" type="submit" name="submit" value="Login">
        <input formaction="/register.php" id="register-button" type="submit" name="register" value="Register" >
    </form>

Answer 5

Answer №3

My suggestion is to include position: relative; in the class: .login-box.

Additionally, assign a class to your registration form such as:

.form-2{
  position:absolute;
  bottom: 0;
  right:0;
}

Answer 6

My suggestion is to include position: relative; in the class: .login-box.

Additionally, assign a class to your registration form such as:

.form-2{
  position:absolute;
  bottom: 0;
  right:0;
}

Answer 7

Answer №4

Combine your second form and button within the first form inside a new div with a flex display style, creating side-by-side buttons.

* {
  font-family: "Montserrat", sans-serif;
}

body,
html {
  margin: 0px;
  padding: 0px;
  background-color: #0e0e0e;
}

.login-box {
  background-color: #010100;
  width: 400px;
  height: 388px;
  margin: 250px auto;
}

.login-box h1 {
  color: #ffffff;
  margin: 0px 35px;
  margin-bottom: 35px;
  padding-top: 25px;
}

.login-box form input {
  display: block;
  width: 324px;
  height: 50px;
  margin-left: 35px;
  margin-right: 41px;
  margin-bottom: 24px;
}

#submit {
  display: inline;
  color: #010100;
  background-color: #e4ff77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  margin-left: 24px;
  margin-right: 41px;
  margin-bottom: 33px;
}

#pwdreset {
  display: block;
  color: #ffffff;
  text-decoration: none;
  margin: 20px 0px;
  margin-left: 225px;
}

#register-button {
  display: inline;
  color: #010100;
  background-color: #e4ff77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  margin-left: 24px;
  margin-right: 41px;
  margin-bottom: 33px;
}

.submits {
  display: flex;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="main.css">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
        <title>Agreya - Login</title>
    </head>

    <body>

        <div class="login-box">

            <h1>Login</h1>

            <form class="login-form" action="login.php" method="post">
                <input id="username" type="text" name="username" placeholder="Email" >
                <input id="password" type="password" name="password" placeholder="Password">
                <a id="pwdreset" href="#">Forgot password?</a>
                <div class="submits">

                  <input id="submit" type="submit" name="submit" value="Login">
                  <form action="https://www.w3docs.com/">
                    <input id="register-button" type="submit" name="register" value="Register">
                </form>
                </div>
            </form>

            

        </div>

    </body>


</html>

Answer 8

Combine your second form and button within the first form inside a new div with a flex display style, creating side-by-side buttons.

* {
  font-family: "Montserrat", sans-serif;
}

body,
html {
  margin: 0px;
  padding: 0px;
  background-color: #0e0e0e;
}

.login-box {
  background-color: #010100;
  width: 400px;
  height: 388px;
  margin: 250px auto;
}

.login-box h1 {
  color: #ffffff;
  margin: 0px 35px;
  margin-bottom: 35px;
  padding-top: 25px;
}

.login-box form input {
  display: block;
  width: 324px;
  height: 50px;
  margin-left: 35px;
  margin-right: 41px;
  margin-bottom: 24px;
}

#submit {
  display: inline;
  color: #010100;
  background-color: #e4ff77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  margin-left: 24px;
  margin-right: 41px;
  margin-bottom: 33px;
}

#pwdreset {
  display: block;
  color: #ffffff;
  text-decoration: none;
  margin: 20px 0px;
  margin-left: 225px;
}

#register-button {
  display: inline;
  color: #010100;
  background-color: #e4ff77;
  border: 2px solid transparent;
  border-radius: 12px;
  width: 150px;
  height: 50px;
  margin-left: 24px;
  margin-right: 41px;
  margin-bottom: 33px;
}

.submits {
  display: flex;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="main.css">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
        <title>Agreya - Login</title>
    </head>

    <body>

        <div class="login-box">

            <h1>Login</h1>

            <form class="login-form" action="login.php" method="post">
                <input id="username" type="text" name="username" placeholder="Email" >
                <input id="password" type="password" name="password" placeholder="Password">
                <a id="pwdreset" href="#">Forgot password?</a>
                <div class="submits">

                  <input id="submit" type="submit" name="submit" value="Login">
                  <form action="https://www.w3docs.com/">
                    <input id="register-button" type="submit" name="register" value="Register">
                </form>
                </div>
            </form>

            

        </div>

    </body>


</html>

Is there a way to align the Login and Register buttons next to each other? I specifically want the Register button to redirect to the register.php page using HTML/CSS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Span tag not respecting CSS width property

The feature of interpolation within attributes has been eliminated. Please use either v-bind or the colon shorthand in its place

Transforming traditional HTML table layout to modern div structure

Gather information that is dynamic upon the selection of a "li" option using Python Selenium

Adaptive video player for complete YouTube experience

Is there a method to trigger click events on overflow content when clicked?

Image encoded in base64 not appearing on the screen

What is the best way to delete the text following the last "/" in location.href with the help of

How to Ensure that the Hidden Value of Select Statement in Angular is Always Displayed as Text

When the width of the element is set to 100vw, it disrupts the

Using Python and Selenium to retrieve information from the attribute 'data-label'

The height of the input element is greater than the size of the font

The process of transforming four columns into two columns and two rows

Modify the background color of the <li> element without using JavaScript after 3 seconds

My divs seem to overlap in strange, unpredictable ways depending on the zoom level - it's an odd phenomenon that occurs

Express, Postgres, and Sequelize throw an error that says "TypeError: Unable to access the 'create' property of undefined."

What is the best way to implement jQuery on my website?

Developing a system mode called "night mode"

What is causing the failure of the requestQuota call in this filesystem api?

Is it possible to place this script above all of my content?