I'm in the process of adding a button towards the lower section of my website.
Here is the HTML code I've used:
<center><a href="#" id="btn1" class="btn1">
View
</a></center>
Now, let's take a look at the CSS styling for the button:
.btn1 {
margin: 60px 0px 60px 0px;
color: white;
background: #ED7836;
padding: 10px 30px 10px 30px;
text-decoration: none;
font-size: 20px;
}
However, when I try to place the button, it doesn't respect the margins I have set and ends up aligning itself right at the bottom of the page.
Screenshot showing the button placement at the bottom of the page
Additionally, when I attempt to change its positioning to absolute and apply left: 50%, the button ends up being placed off-center in an awkward location.
.btn1 {
position: absolute;
left: 50%;
margin: 60px 0px 60px 0px;
color: white;
background: #ED7836;
padding: 10px 30px 10px 30px;
text-decoration: none;
font-size: 20px;
}
Screenshot displaying the misaligned button
Thank you for your assistance.