I have this code:
<div id="OrderGetStarted" class="new">
<div class="started">
<span class="block">
<h1 class="textCenter OldStandard orange fontt">Get Started</h1>
<form>
<input type="email" placeholder="Email" class="js-email" required>
<span class="block darkRed js-email-err err"></span>
<input type="text" placeholder="Zip Code" class="js-zip" required>
<span class="block darkRed js-zip-err err"></span>
<input type="text" placeholder="First Name" class="js-name" required>
<span class="block darkRed js-name-err err"></span>
<input type="text" placeholder="Last Name" class="js-lname" required>
<span class="block darkRed js-lname-err err"></span>
<input type="text" placeholder="Password" class="js-pass" required>
<span class="block darkRed js-pass-err err"></span>
<input type="text" placeholder="Confirm Password" class="js-pass" required>
<span class="block darkRed js-pass-err err"></span>
<span class="textLeft flex alignCenter terms">
<input type="checkbox" required>
<span>
<span>I agree to</span>
<a class="orange" href="legal.php">Terms & Conditions</a>
</span> </span>
<span class="block darkRed js-post-err err"></span>
<span class="textLeft flex alignCenter terms">
<span>
Keep me posted!
</span></span>
<center>
<input class="orangeBtn white cbtn c1" type="submit" value="START MY ORDER">
</center>
</form>
<span class="textCenter block">
<span>Already have an account?</span>
<span class="orange pointer">Login Here</span>
</span>
</span>
</div>
</div>
Select all Open in new window
css:
.new{
background-color: white;
margin-right:350px;
margin-left:350px;
z-index: 10;
}
.started{
margin-top:-100px;
}
input[type="text"]{
border: 3px solid #eae9ef;
border-radius: 3px !important;
box-sizing: border-box !important;
background: rgba(255,255,255,0) !important;
padding: 1.5em 1em !important;
}
input{
text-rendering:auto;
color: initial;
letter-spacing:normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
font: 13.3333px Arial;
}
#OrderGetStarted .orangeBtn{
width:150px;
padding:1em;
border-radius:3px;
border:none;
margin:3em auto;
padding-left:35px;
display:inline;
margin-left:30px;
}
.cbtn:hover{
background-color: #b13812 !important;
color: white;
}
Select all Open in new window
How can I make the button inactive with this color:
#C1C1C1 and become clickable/active with the same color it has now, when the user has entered all their information and agreed to the terms?