How to mix behaviour of bootstrap buttons?

I am want to keep the default bootstrap buttons as they are but on some places I need to customize their behaviour for example I want to have button primary by default but on hover I want it to act like button outline primary, I tried
.my-custom-btn{
 @extend .btn-primary;

&:hover{
 @extend .btn-outline-primary;
}
}

But it isn't working because the .btn-primary hover effects are taking over, how can I fix it?
Was this page helpful?