I attempted to create a button with a red border that is positioned at the bottom and center, but the padding seems to be interfering with my design. It appears that with the border, the width extends to 100% which doesn't make sense.
I have tried various solutions, the only workaround I discovered was setting the margins to around 200px, but the clickable area remains too large along the x-axis. If anyone has insights into what might be causing this issue, I would greatly appreciate an answer. Thank you!
HTML:
<div class="message">
<h1>NA CONJUGAÇÃO DO COMPROMISSO, DO ACOMPANHAMENTO E DA ATENÇÃO.</h1>
<h3>A colaboração de todos é fundamental para a concretização dos pressupostos de uma escola que todos queremos.</h3>
</div>
<div class="button">
<a href="example.com">
<div class="ano-letivo">Ano Letivo</div>
</a>
</div>
CSS:
h1 {
font-family: 'Abril Fatface', cursive;
color: white;
text-align: center;
padding: 80px 300px 5px;
font-size: 60px;
text-shadow: 0px 2px 3px black;
}
h3 {
font-family: 'Roboto Slab', serif;
color: white;
text-align: center;
text-shadow: 0px 2px 3px black;
}
.ano-letivo {
text-align: center;
color: white;
font-weight: 600;
padding: 10px;
border: 3px solid rgb(255, 69, 59);
}
How it looks: (excluding background) https://i.sstatic.net/x11z0.jpg