I have the following script and I want to be able to change the button colour from grey (when disabled) to green once enabled.

I have added both disabled and enabled property in my css and using vue.js (which I am new to) but so far it does not seem to go from grey to green. Rather it stays light green and then green.

Here is my script

CSS AND HTML

   .disabled {
opacity: 0.4;
background:grey;
}

.
.ctaBtn_Start,
.ctaBtn_Start a:link,
.ctaBtn_Start a:visited {
background: pink;

/*   VARIABLE   */
text-align: center;
border-radius: 0.625rem;
border: none;
font-size: 1.5rem;
font-weight: 700;
cursor: pointer;
/*vertical-align: middle;*/
color: #ffffff;
margin-bottom: 1.25rem;
padding: 0.5rem 2rem;
vertical-align: auto;
}

.ctaBtn_Start:hover {
background: #00cc00;
/* VARIABLE */
}
.ctaBtn_Start:disabled,
button[disabled] {
background: yellow;
color: #ffffff;
}

.ctaBtn_Start:enabled,
button[enabled] {
background: #049804; // pink; // #006600;
// color: #049804;
}

 
// and HTML Button with vue.js binding to the css

<button   enabled disabled class="ctaBtn_Start"    
        type="submit"
        v-bind:class="{ 'disabled' : $v.$invalid || isLoading }">
    Start
</button>

CodePudding user response：

Try like following snippet:

new Vue({
  el: '#demo',
  data() {
    return {
      invalid: true,
      isLoading: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.invalid = false
      this.isLoading = false
    }, 3000)
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

.disabled {
  opacity: 0.4;
  background:grey;
}

.
.ctaBtn_Start,
.ctaBtn_Start a:link,
.ctaBtn_Start a:visited {
  background: pink;

  /*   VARIABLE   */
  text-align: center;
  border-radius: 0.625rem;
  border: none;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  /*vertical-align: middle;*/
  color: #ffffff;
  margin-bottom: 1.25rem;
  padding: 0.5rem 2rem;
  vertical-align: auto;
}

.ctaBtn_Start:hover {
  background: #00cc00;
/* VARIABLE */
}
.ctaBtn_Start:disabled,
button[disabled] {
  /*background: yellow;*/
  color: #ffffff;
}

.ctaBtn_Start:enabled,
button[enabled] {
  background: #049804; /* pink; // #006600;*/
  /*color: #049804;*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <button :disabled="invalid && isLoading" :enabled="!invalid && !isLoading" class="ctaBtn_Start"    
          type="submit"
          v-bind:class="invalid || isLoading ? 'disabled' : ''">
      Start
  </button>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can just use css and html

Styling

button[disabled] {
  color: gray;
  background-color: lightgray;
}

button {
  color: green;
  background-color: lightgreen;
}

Markup

<button disabled>click here</button>