How To Style The Button For Opt-In Forms?

Turn this standard form

Into this…

Create your form, save it, and add it to the webpage.

Copy the code below into Page Setting > CSS

/* Button code*/
.default .btn-primary.disabled, .default .btn-primary:disabled, .default .btn:not(:disabled):not(.disabled){
    background: red !important; /*use a hex color code*/
    box-shadow: 0px 0px 6px 0px black !important;
    border: none !important;
    height: 75px !important;   
    font-family: "Poppins" !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    opacity: 1 !important; /* disabled button looks the same as normal*/
    width: 100% !important;
}

/*button hover code*/
.default .btn-primary.disabled, .default .btn-primary:disabled:hover, .default .btn:not(:disabled):not(.disabled):hover {   
    background: green !important;   
    transition-duration: 0.2s !important;   
    transition-timing-function: ease !important;
}

/*input fields*/
input.form-control {   
    border-radius: 0px !important;   /*Rounded or square corners*/
    border-top: none !important; /*If you want the full outline, delete this row*/   
    border-left: none !important;   /*If you want the full outline, delete this row*/   
    border-right: none !important;   /*If you want the full outline, delete this row*/   
    border-bottom-color: black !important;   /*If you want the full outline, delete this row*/   
    border-bottom-width: 2px !important;   /*If you want the full outline, delete this row*/   
    font-family: "Poppins" !important;   
    font-size: 20px !important;   
    width: 100% !important;
}

/*placeholder - text in box before you type anything*/
input.form-control:placeholder {   
    font-family: "Poppins" !important;   
    font-size: 20px !important;
}

/* Change checkbox color*/
input.form-check-input {
    accent-color: black !important; /*Use hex or rgb color*/
}


/*Button code mobile*/
@media only screen and (max-width: 480px) {
.default .btn-primary.disabled, .default .btn-primary:disabled, .default .btn:not(:disabled):not(.disabled) {
    font-size: 18px !important;
    font-weight: 700 !important;
    width: 100% !important;
    height: 50px !important;
  }
}

/*input field mobile*/
@media only screen and (max-width: 480px) {
input.form-control {   
    font-size: 18px !important;
    width: 100% !important;
  }
}