Hovering Button Issues - html

Question

I have placed a button on my page and whenever I hover over that button, my text and slightly shifts upwards. Please help (I am a beginner/novice/green) - the code will be shown below
.btn {
font-weight: 700px;
border-radius: 500px;
text-transform: uppercase;
border-color: none;
padding: 10px;
}
.btn-xl {
padding: 1rem 2rem;
background-color: #4B307B;
border-color: white;
}
.btn-xl:hover {
background-color: gold;
border-width: 3px;
border-color: #4B307B;
}
hr {
border-color: gold;
width: 150px;
max-width: 65px;
}
<div class="container d-flex align-items-center h-100">
<div class="row">
<header class="text-center col-12">
<h1 class="text-uppercase"><strong>Graduation Support</strong></h1>
</header>
<div class="buffer col-12"></div>
**
<section class="text-center col-12">
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
</section>**
</div>
</div>

Answer 1

You need to add the border-width: 3px; to the .btn-xl class as well, not just the hover class. I believe its the border appearing on the hover that is causing the issue. See here:
.btn{
font-weight: 700px;
border-radius: 500px;
text-transform: uppercase;
border-color: none;
padding: 10px;
}
.btn-xl{
padding: 1rem 2rem;
background-color: #4B307B;
border-color: white;
border-width: 3px;
}
.btn-xl:hover{
background-color: gold;
border-width: 3px;
border-color: #4B307B;
}
hr{
border-color: gold;
width: 150px;
max-width: 65px;
}
<div class="container d-flex align-items-center h-100">
<div class="row">
<header class="text-center col-12">
<h1 class="text-uppercase"><strong>Graduation Support</strong></h1>
</header>
<div class="buffer col-12"></div>
**<section class="text-center col-12">
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
</section>**
</div>
</div>