I'm currently working on creating a rectangular button using HTML and CSS. The challenge I'm facing is ensuring that the width of the button remains consistent regardless of the amount of text it contains. Whether it's just a few words or multiple lines, I want the button to stay the same width and have the text centered inside. The button should also have 5% margins on each side, which led me to believe that setting the button width to 90% would achieve this. However, my attempts proved otherwise, causing some confusion about how % measurements work in relation to browser window width.
My goal is for the button background to extend all the way to the margins while keeping the text centered within the button. It's important to clarify that by "button," I am referring to a custom button created with a link, not the standard HTML tag.
Below is the code for the desired button layout:
<a href="separatePage.html" class="button" style="position:absolute;
margin-top:255px;
margin-left:5%;
margin-right:5%;
background-color:rgb(24, 90, 212);
color:white;
text-align:center;
padding:2.5%;
border-radius:25px;
border-style:inset;
border-color:white;
border-width:4px;
text-decoration:none;">I want this button to stretch out to the margins</a>
Since I'm relatively new to coding, any feedback or suggestions from experienced developers are highly appreciated. Feel free to share any improvements or best practices you think could benefit my approach. Thank you!