How can I ensure that my "Play Again" button moves up to align perfectly under the black border box?
The black border box is styled with a class named .foot
.button {
background: rgb(247, 150, 192);
background: radial-gradient(circle, rgba(247, 150, 192, 1) 0%, rgba(118, 174, 241, 1) 100%);
transition: transform 250ms;
width: fit-content;
font-size: 25px;
position: relative;
}
.button:hover {
cursor: pointer;
box-shadow: -1px -1px 20px 0px rgba(255, 255, 255, 1), -4px -4px 5px 0px rgba(255, 255, 255, 1), 7px 7px 20px 0px rgba(0, 0, 0, .4), 4px 4px 5px 0px rgba(0, 0, 0, .3);
transform: translateY(-10px);
}
.foot {
border-style: solid;
border-color: black;
border-radius: 10px;
width: 300px;
margin-bottom: 450px;
height: 100px;
}<footer class="foot"></footer>
<button class="button">Play Again</button>