Width of button and the corner style changes with hover effect applied

Site URL: https://ppi-institute.squarespace.com

PW: janandsusan

So we're attempting to add a hover effect for all buttons (sitewide) — the code is here that works for everything except image cards:

.image-button-inner:hover a {
    background: #FFFFFF

 !important;
    color: #000000

 !important;}
.image-button-inner:hover {box-shadow: 0px 2px 5px rgba(0,0,0,.3)}

The problem is specifically the hover effect on the image card CHANGES the button width on hover AND removes the rounded corners. 

Help? 

Don't remove any code in your current code. Add this CSS to fix problem

.image-button-inner {
    display: inline-block;
}

@tuanphanThis worked perfectly to change the button width, thank you! The button corners are still not rounded (on hover) -- is there a way to add this?

On 3/13/2022 at 2:26 AM, janandsusan said:

@tuanphanThis worked perfectly to change the button width, thank you! The button corners are still not rounded (on hover) -- is there a way to add this?

Try change to this

.image-button-inner {
    display: inline-block;
    border-radius: 10px;
}

@tuanphan That did it! Can't thank you enough for your help -- you're the best!