Customizing bootstrap.css in web site.css for button define spotlight on hover not fairly working

Utilizing bootstrap 5.2, and I do not know how you can do sass, so I am making an attempt to easily override the bootstrap css in my web site.css file, and it is…kinda working as a result of the hyperlink highlights, however not the entire field.

I’ve taken the .btn-outline-primary and associated, to a customized class title and worth for the colour (actually copy/pasting and doing a search/change for the colours I need, and put it in my web site.css file) however the button will not change colour on hover. I am clearly lacking one thing, however what?

That is the bootstrap model:

.btn-outline-primary {
  colour: #0d6efd;
  border-color: #0d6efd;
}
.btn-outline-primary:hover {
  colour: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
.btn-check:checked + .btn-outline-primary, .btn-check:lively + .btn-outline-primary, .btn-outline-primary:lively, .btn-outline-primary.lively, .btn-outline-primary.dropdown-toggle.present {
  colour: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.btn-check:checked + .btn-outline-primary:focus, .btn-check:lively + .btn-outline-primary:focus, .btn-outline-primary:lively:focus, .btn-outline-primary.lively:focus, .btn-outline-primary.dropdown-toggle.present:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
.btn-outline-primary:disabled, .btn-outline-primary.disabled {
  colour: #0d6efd;
  background-color: clear;
}

And right here is my model:

.btn-outline-my-purple {
    colour: #4b135f;
    border-color: #4b135f;
}

.btn-outline-my-purple :hover {
    colour: #fff;
    background-color: #4b135f;
    border-color: #4b135f;
}

.btn-check:focus + .btn-outline-my-purple, .btn-outline-my-purple :focus {
    box-shadow: 0 0 0 0.25rem rgba(75,19,95,0.5);
}

.btn-check:checked + .btn-outline-my-purple, .btn-check:lively + .btn-outline-my-purple, .btn-outline-my-purple :lively, .btn-outline-my-purple .lively, .btn-outline-my-purple .dropdown-toggle.present {
    colour: #fff;
    background-color: #4b135f;
    border-color: #4b135f;
}

.btn-check:checked + .btn-outline-my-purple :focus, .btn-check:lively + .btn-outline-my-purple :focus, .btn-outline-my-purple :lively:focus, .btn-outline-my-purple .lively:focus, .btn-outline-my-purple .dropdown-toggle.present:focus {
    box-shadow: 0 0 0 0.25rem rgba(75,19,95,0.5);
}

.btn-outline-my-purple :disabled, .btn-outline-my-purple .disabled {
    colour: #4b135f;
    background-color: clear;
}

After I mouse over the button (which is a part of a vertical button group), solely the hyperlink will get highlighted, and never the entire button.

<button kind="button" class="btn btn-outline-my-purple"><a asp-action="Index" asp-route-guid="@ts.Guid" class="my-purple" >@ts.Identify</a></button>

What else do I must do?