Custom button style using CSS is not changing properly in Appointment+

Hello, I've written a CSS code and it's not working properly, for the pagination (.previous and .next) and the Paypall Confirm payment (.app_submit_btn) buttons. It also results in a weird shift in the screen. I may as well include that I'm not a CSS expert whatsoever! I'm learning CSS as I was working on it.

Here's the code I want for the buttons:

background-color: rgba(255, 255, 255, 0) !important;
color: #ffffff !important;
border: 2px solid #ffffff !important;
-moz-transition: all 0.2s ease-in-out !important;
-webkit-transition: all 0.2s ease-in-out !important;
transition: all 0.2s ease-in-out !important;
-webkit-border-radius: 50 !important;
-moz-border-radius: 50 !important;
border-radius: 50px !important;
font-size: 24px !important;
font-family: Oswald !important;
padding: 10px;

So this makes the button round, and it's supposed to make the border white, with white text.
Then on hover I have this code:

display: inline-block;
background-color: rgba(0, 0, 0, 0.1) !important;
border-color: rgba(255, 255, 255, 0) !important;
cursor: pointer !important;

This will remove the border and add a slight colour to the background. However, this is not what happens for the pagination and paypall buttons (see above). But the other buttons are working fine (refer to screenshots). Also, the text on the button makes the screen look weird. Is there a way to fix this?

I'm using the latest version of Divi. This problem could be found on