Image block button hover color issue

Site URL: https://www.soulstoriesproject.com/client-work

I'm trying to add a custom button hover effect on the button within an image block.

I used this code but it created an odd hover effect that spanned the width of the block (see attached)

.image-button:hover {
  background-color: #dca757 !important
}

I'd like these buttons to function like the one on the homepage: https://www.soulstoriesproject.com

Any insight as to what I'm doing wrong is greatly appreciated!

.sqs-block-button-element:hover {
background-color:#f6c03c!important; color:#000!important}

You can change the colors by making your own and choosing  a hex number here: https://htmlcolorcodes.com/

.image-card-wrapper .image-button a:hover {
    background-color: #dca757 !important;
    transition: .5s;
}