Button problems.

Hello !
I created a button with Buton (SiteOrigin) widget in which i set only color button (orange #f47e3c). In Custom CSS I have introduced the following sequence for the newly created button:
.so-widget-sow-button-atom-1e80d9e62c35 .ow-button-base a {
display: inline-block !important;
padding: 9px 20px;
font-size: 19px;
cursor: pointer !important;
text-align: center;
text-decoration: none;
outline: 0 !important;
color: #ffffff !important;
background-color: #3e8e41 !important;
border: none;
border-radius: 15px;
box-shadow: 0 8px #999;
}

.so-widget-sow-button-atom-1e80d9e62c35 .ow-button-base a:hover {
display: inline-block;
padding: 5px 16px;
font-size: 15px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: 0 !important;
color: #ffffff;
background-color: #f58446 !important;
box-shadow: 0 1px #999 !important;
}
My problem:
1. On hover background-color: #f58446 does not applied (see https://www.itdomains.ro).
2. I do not know how to apply on click effect (not on hover).
I want a button like this (css code below). Please, if you are kind, tell me how to do.

.button {
display: inline-block;
padding: 8px 18px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #f47e3c;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}

Calculate

Thank you.
Dragos D.