Different buttons having the same function - html

Question

I have this back and confirm button. The problem is that when I click the back button it confirms the form. Basically my back and confirm button are having the same function.
I tried putting the back button outside the and it worked well. The problem is it would look like this:
The thing is I want the back button to go first and then the confirm button next. Like this:
I can only do that when the back button is inside the form. As I've said I'm having problems when I do that.
Here's my html:
.form__confirmation,
.form__confirmation2 {
padding: 0px 0px;
display: inline-block;
}
button {
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
background-color: #011f4b;
border: 1px solid #DADDE8;
color: #fff;
padding: 18px;
border-radius: 5px;
outline: none;
-webkit-transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
left: 330px;
margin-bottom: 20px;
}
button:hover {
background-color: #1293e1;
}
button:active {
background-color: #1083c8;
}
<div class="container">
<div class="card">
<div class="form__name" style="font-family: Questrial; ">
Leave Application Form
</div>
<div class="time__container">
<div class="section">
<div class="box">
1
</div><span>Date & Time</span>
</div>
<form action="form-to-email.php" class="form__time" method="post">
<div class="date">
<label for="date">From</label> <input id="date" type="date" name="datefrom" required>
</div>
<div class="date">
<label for="date">To</label> <input id="date" type="date" name="dateto" required>
</div>
<div class="timezone">
<label for="timezone"></label>
</select>
</div>
</div>
<div class="message__container">
<div class="section">
<div class="box">
2
</div><span>Message</span>
</div>
<textarea cols="50" rows="5" name="message" required></textarea>
</div>
<div class="contact__container">
<div class="section">
<div class="box">
3
</div><span>Contact Information</span>
</div>
<div class="form__contact">
<div class="cname">
<label for="cname">Name</label> <input name="name" type="text" required>
</div>
<div class="cnum">
<label for="cnum">Phone Number</label> <input id="cnum" type="text" name="phoneno" required>
</div>
<div class="email">
<label for="cemail">Email</label> <input id="cemail" name="email" required>
</div>
</div>
</div>
<div class="contact__container">
<div class="section">
<div class="box">
4
</div><span>Send to</span>
</div>
<div class="form__contact">
<div class="cname">
<label for="cname">Manager</label> <select name="emailTo" required>
<option value=""></option>
<option value="email#gmail.com">TestingRenzo</option>
<option value="email#gmail.com">TestingPaul</option>
</select>
</div>
</div>
</div>
<a href="home.php">
<div class="form__confirmation2">
<button>Back</button>
</div>
</a>
<div class="form__confirmation" type="submit" name="submit">
<button>Confirm Information</button>
</div>
</form>
</div>
</div>

Answer 1

Try changing this [horribly invalid] code:
<a href="home.php">
<div class="form__confirmation2">
<button>Back</button>
</div>
</a>
<div class="form__confirmation" type="submit" name="submit">
<button>Confirm Information</button>
</div>
To this [valid] version instead:
<div class="form__confirmation2">
<a class="button" href="home.php">Back</a>
</div>
<div class="form__confirmation">
<button type="submit" name="submit">Confirm Information</button>
</div>
And add the .button class to your CSS:
button,
.button {
...
}
button:hover,
.button:hover {
...
}
button:active,
.button:active {
...
}

Answer 2

Your HTML is somewhat wrong. Try to minimize the DIV tags if you can then you will understand the problem. Also in the submit button DIV tag you have mentioned a wrong bootstrap class if I am not wrong.

Answer 3

You can use float:right in order to change the positioning of your buttons. This will leave your DOM structure intact.
<div class="form__confirmation" type="submit" name="submit" style="float:right;" >
<button>Confirm Information</button>
</div>
</form>
<a href="home.php">
<div class="form__confirmation2" style="float:right;">
<button>Back</button>
</div>
</a>
This is the entire code Snippet.
<div class="container">
<div class="card">
<div class="form__name" style="font-family: Questrial; ">
Leave Application Form
</div>
<div class="time__container">
<div class="section">
<div class="box">
1
</div><span>Date & Time</span>
</div>
<form action="form-to-email.php" class="form__time" method="post">
<div class="date">
<label for="date">From</label> <input id="date" type="date" name="datefrom" required>
</div>
<div class="date">
<label for="date">To</label> <input id="date" type="date" name="dateto" required>
</div>
<div class="timezone">
<label for="timezone"></label>
</select>
</div>
</div>
<div class="message__container">
<div class="section">
<div class="box">
2
</div><span>Message</span>
</div>
<textarea cols="50" rows="5" name="message" required></textarea>
</div>
<div class="contact__container">
<div class="section">
<div class="box">
3
</div><span>Contact Information</span>
</div>
<div class="form__contact">
<div class="cname">
<label for="cname">Name</label> <input name="name" type="text" required>
</div>
<div class="cnum">
<label for="cnum">Phone Number</label> <input id="cnum" type="text" name="phoneno" required>
</div>
<div class="email">
<label for="cemail">Email</label> <input id="cemail" name="email" required>
</div>
</div>
</div>
<div class="contact__container">
<div class="section">
<div class="box">
4
</div><span>Send to</span>
</div>
<div class="form__contact">
<div class="cname">
<label for="cname">Manager</label> <select name="emailTo" required>
<option value=""></option>
<option value="email#gmail.com">TestingRenzo</option>
<option value="email#gmail.com">TestingPaul</option>
</select>
</div>
</div>
</div>
<!-- CHANGED BUTTON TAGS -->
<div class="form__confirmation" type="submit" name="submit" style="float:right;" >
<button>Confirm Information</button>
</div>
</form>
<a href="home.php">
<div class="form__confirmation2" style="float:right;">
<button>Back</button>
</div>
</a>
</div>