Change hover CSS with Javascript

by lindychen

HTML

<button type="submit" class="elementor-button elementor-size-sm">
  <span>
    <span class=" elementor-button-icon">
    </span>
    <span class="elementor-button-text">Place order</span>
  </span>
</button>

CSS

button.elementor-button.elementor-size-sm {
hyphens: manual;
margin: 0;
overflow: visible;
text-transform: none;
width: auto;
-webkit-appearance: button;
white-space: nowrap;
user-select: none;
box-sizing: border-box;
display: inline-block;
line-height: 1;
fill: #fff;
text-align: center;
transition: all .3s;
cursor: pointer;
border: 0;
font-size: 15px;
padding: 12px 24px;
border-radius: 3px;
font-family: "Roboto", Sans-serif;
font-weight: 500;
flex-basis: 100%;
min-height: 40px;
background-color: #000000;
color: #ffffff;
border-style: double;
border-width: 7px 7px 7px 7px;
}

button.elementor-button.elementor-size-sm:hover {
  background-color: #ffffff;
  color: #000000;
}

JavaScript

var css = 'button.elementor-button.elementor-size-sm:hover{ background-color: #cc3633; color: #ffffff } button.elementor-button.elementor-size-sm {background-color: rgba(204,54,51,0.86); #ffffff}';
var style = document.createElement('style');

if (style.styleSheet) {
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);