Changing Site Origin Button Background And Text Color On Hover

Dear support,

I try to change the background and text color of my button when people hover over it, but can’t get it to work perfectly. I kind of get the result I want, because the background color is changed when I hover over the button. However, the text color is only changed when hovering exactly over that text, and not when just hovering over the border of the button. In other words: when my cursor is not exactly on the text, I only have a completely red button. I use the following CSS:

.so-widget-sow-button .ow-button-base :hover {
color: #fff;
background-color: #ff2828;
transition: 0.5s;
}

Also, if you look closely when putting your cursor over the text, you will see a rectangle that gets red first, while the rest of the button then slowly fades into red. When I use the following code, only the background directly behind the letters is changed, and the rest of the button stay transparent.

.ow-button-base :hover {
color: #fff;
background-color: #ff2828;
transition: 0.5s;
}

It is kind of difficult to explain, but I hope you could help me. I have searched everywhere and tried a lot, but can’t find a solution.

My site is: http://howtogetrippedathome.com/.

Best,
Maarten