The button in bootsrap4 only works when hovering over the top of the button, what should I do?

Question

Bootstrap

When you hover over the button, only 1/10 of the top part works, the rest stops working (all buttons on the site with this problem, except for menus and tabs)
a couple of buttons from the code:

<div class="row">
<div class="form-group col-12">
<button class="btn btn-light" mail-to="" type="submit" style="float: right">Отправить</button>
</div>
</div>
<p><a class="btn btn-lg btn-primary" href="" role="button">кнопка</a></p>

I thought about the text, but brought it out through css, it still does not work.
What could be the matter, where to look for the problem?

Answer 1

I didn’t understand anything, but it’s very interesting) I would throw a piece of code into the codepen and indicate which ones work and which ones don’t. button doesn't work in your example? does it change the background on hover?