JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<select class="form-contol" onchange="animate()">
<option value='0'> Select</option>
<option value='1'> 1</option>
<option value='2'> 2</option>
<option value='3'> 3</option>
</select>
<select class="form-contols" onchange="animate()">
<option value='0'> Select</option>
<option value='1'> 1</option>
<option value='2'> 2</option>
<option value='3'> 3</option>
</select>
<button type="button" class="calculate-btn">Claculate</button>
<button type="reset" id="reset">Reset</button>
</form>
CSS
.form-contol,.form-contols{
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
color: #555555;
display: block;
font-size: 14px;
height: 34px;
line-height: 1.42857;
padding: 6px 12px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
vertical-align: middle;
width: 50%;
margin-bottom:10px;
}
button{
background-color:transparent;
background-color: #5CB85C;
color: #FFFFFF;
padding:10px;
border:1px solid #4CAE4C;
cursor:pointer;
margin-right:10px;
font-size:18px;
}
JavaScript
animate= function(){
var value= $(".form-contol").val();
var value1= $(".form-contols").val();
if(value > 0 && value1 > 0){
blink();
}
}
var blink = function() {
$(".calculate-btn").animate({
opacity: '0'
}, function(){
$(this).animate({
opacity: '1'
}, blink);
});
}
$("#reset").click(function(){
$(".calculate-btn").stop()
.css('opacity' , 1).delay(500).animate({opacity : '1'},blink);;
});