html issue, when resizing a window, a button becomes smaller if the window is bigger and viceversa, how can I get the opposite thing?

[12345678]

Quote

<div style="float: left; width: 100%; position: relative;"> <img src="image2.png" alt="Third Image" style="width:100%"> <a href="https://www.yourwebsite.com" style="display: block; position: absolute; top: 65%; left: 10%;"> <img src="image3.png" alt="Button Image" style="width: 20%; height: 20%;"> </a> </div>

I am using an image as a button, when making the window bigger, the buttons becomes smaller, when making the window smaller, the buttons become smaller,

if I remove the %, it breaks the responsiviness

[Vicarian]

It's frustrating and counterintuitive, but nested elements with size don't also confer their size to their parent.  Meaning that the button nested in the link with height and width doesn't actually do anything.  Move the size up to the link, then make the image have height and width of 100% and display as block:

<div style="float: left; width: 100%; position: relative;">
  <img src="image2.png" alt="Third Image" style="width:100%" />
  <a href="https://www.yourwebsite.com" style="display: block; position: absolute; top: 65%; left: 10%; width: 20%; height: 20%;">
    <img src="image3.png" alt="Button Image" style="width: 100%; height: 100%; display: block;" />
  </a>
</div>

Adjust the size as necessary, and if needed, also use the min-width or min-height CSS properties.