Adding custom CTA buttons

Hi all,

I’m trying to replace default buttons with customised CTAs but I’m having trouble with adding my new CTA to sidebar widgets. Could anyone tell me how I can go about using the following custom CTA instead of the defaults?

Thanks in advance.

.button {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 1% 2%;
border: none;
background-color: Transparent;
font-family: ‘Lato’, sans-serif;
font-weight: 400;
font-size: 16px;
text-decoration: none;
border: 2px solid Transparent;
border-radius: 3px;
}
.button:hover,
.button:focus {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 1% 2%;
border: none;
background-color: Transparent;
font-family: ‘Lato’, sans-serif;
font-weight: 800;
font-size: 16px;
text-decoration: none;
background: #ffc107;
border: 2px solid #212121;
border-radius: 3px;
color: #212121;
}
.button:active {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 1% 2%;
border: none;
background-color: Transparent;
font-family: ‘Lato’, sans-serif;
font-weight: 800;
font-size: 16px;
text-decoration: none;
background: #212121;
border: 2px solid #ffc107;
border-radius: 3px;
color: #ffc107;
-webkit-transform:rotate(-180deg);
-moz-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
ms-filter:”progid:DXImageTransform.Microsoft.BasicImage(rotation=2)”;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}