Button Element Css Keeps on resizing when moving to different screen - css

Question

So i am working on putting a button in my application website. The thing is that the button css element keeps on resizing when i switch screen and i want it to stay like my other elements as well.
Here is my Button code in Home.Js:
import React from 'react';
import { Link } from "react-router-dom";
import HeroSection from '../../HeroSection';
import { homeObjOne, homeObjTwo, homeObjThree } from './Data';
import './Home.css';
function Home() {
return (
<>
<HeroSection {...homeObjOne} />
<Link to="/Sign-up">
<button className="button" type="button">
Sign In or Register Today!
</button>
</Link>
<HeroSection {...homeObjThree} />
<HeroSection {...homeObjTwo} />
</>
);
}
export default Home;
Here is my Home.css file
.button {
padding: 12px 64px;
border-radius: 5px;
border: 1px solid var(--primary);
color: rgb(0, 0, 0);
font-size: 22px;
cursor: pointer;
transition: all 0.3s ease-out;
position: absolute;
left: 18.4%;
bottom: 450px;
}
.button:hover {
color: #fff;
background-color: #278087;
transition: all 0.2s ease-out;
}
I have tried putting position:absolute and position:relative but still causes the same issue and couldn't figure out why it keeps happening.