Update the button color to transform it from a dull grey when disabled to a vibrant shade

I am trying to modify the button color in my script from grey to green when it transitions from disabled to enabled status. Despite using both the disabled and enabled properties in my CSS and incorporating vue.js (which I am not very familiar with), the color change does not work as expected. Instead of going from grey to green, it goes from light green to green.

Below is the code snippet:

CSS AND HTML

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

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

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

.ctaBtn_Start:hover {
    background: #00cc00;
}

.ctaBtn_Start:disabled,
button[disabled] {
    background: yellow;
    color: #ffffff;
}

.ctaBtn_Start:enabled,
button[enabled] {
    background: #049804;
}

// 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>
htmlcssvue.js

Answer №1

Take a look at this code 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>

Answer №2

If you're looking to change the color of a button using a method, consider creating a function like toggleColor(). In your button element, add an event listener like this: 

<button @click="toggleColor"></button>

Within the toggleColor() function, you can toggle the color by writing:

toggleColor() {color === !color}(switching the color state)

After that, include a conditional statement to set the color based on its current value like so: if (color = true) {set color to ...}

I hope these instructions guide you in the right direction.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guidelines for sending an array from a Laravel Controller through AJAX and generating a button based on the received data

Before making a selection, I click on the Color button: <form class="form form-variant"> {{ csrf_field() }} <button type="submit" class="btn btn-success che ...

javascripthtmlajaxlaravel

The default value is not displayed in the Angular dropdown menu

When using regular html select menus, if you create an option element with selected and disabled attributes and provide text for that option, the text will be displayed by default in the select menu. Below is a basic example of HTML code: <select name= ...

javascripthtmlangular

Ensure that the two background images are identical in size and content

Can someone assist me with achieving vertical equality for two background images like in this example image? Currently, I have the following styling applied: background-repeat: no-repeat, repeat-x, repeat-y; background-position: 925px center; However, t ...

cssimageimage-scaling

Troubleshooting Issue with Bootstrap 4 Modal Varying Content Display

Dealing with a minor issue where I'm unable to get a modal to fetch data from an HTML table and populate it into a Bootstrap 4 Modal. I've attempted various methods as evident in the code snippets below. Currently in a learning phase, I need to ...

javascriptjqueryhtmlbootstrap-4bootstrap-modal

Utilize JQuery to implement fading effects for clicked elements in a webpage

I've been using a rollover JavaScript plugin to create smooth transitional effects when users hover over clickable page elements. Everything was going well until I decided to switch to making ajax calls instead of page loads for dynamic content. The p ...

javascriptjqueryhtmlcss

Working with the Enter Key in Vue.js

I am faced with a challenge involving a text field and a button setup. By default, the button is set to submit a form when the Enter key is pressed on the keyboard. My goal is to capture each key press while someone is typing in the text field, particularl ...

javascriptvue.js

Position the div at the bottom of the page

I managed to successfully position the div at the bottom using this code snippet: #div { position: absolute; width: 100%; height: 58px; margin: 0 auto; bottom: 0; left: 0; overflow: hidden; } Lately, I decided to add a sidebar ...

htmlcss

Is it possible to use only CSS to crop an image into a square and then shape it into

I am attempting to create a circular shape out of images that have varying sizes and shapes (some rectangular, some square, some portrait, and some landscape). When I apply either clip-path: circle(50% at 50% 50%); or border-radius: 50%;, the image transf ...

htmlcssimage

How I made my WordPress columns automatically resize with the help of Bootstrap

Currently, my Wordpress template utilizes Bootstrap 2.3.1 with two areas set up using SPAN4 and SPAN8. The resolution is fixed at 1170px, so there's no need to configure the lg component of Bootstrap. I'm looking for assistance in properly confi ...

htmlcsswordpresstwitter-bootstrap

Displaying items from an array is made easy thanks to the combination of mapGetters, VUEJS, vuex, and vuetify

My website has two main routes: one for the home page and another for a configuration panel. In the home page, there is a container displaying information such as date, time, current temperature, etc. Below that, there is another container where users can ...

javascriptvue.jsvuexvuetify.jsvue-router

Thumbnails gracefully hovering alongside titles

I am puzzled by the fact that some of the thumbnails are displaying differently even though they have the same CSS... h4 { line-height:100%; color: #be2d30; letter-spacing: 1px; text-transform: uppercase; font-family: 'Gnuolane'; font-size:26px ...

csshtmlimageviewtitle

CSS uses color parameters in the same way

Apologies, I spent a few years immersed in the world of IT. Now, onto my query: I have a lengthy ".css" file with numerous structures like color: #567567; within it. Is there a way to utilize a construction similar to color: $mycolor or is this not po ...

css

Auto-closing dropdown menus in the navbar of a Shiny app with Bootstrap

Is there a way to customize the behavior of a shiny navbarMenu so that when I click inside or outside it, the dropdown does not automatically hide? I have seen mentions of using data-bs-auto-close="false" in the Bootstrap documentation, has anyon ...

htmlcssrshinybootstrap-5

Can we modify the cell width in knitr and pandoc?

When generating an HTML file using knitr/pandoc to display multiple tables in a loop, how can you ensure that each table has the same total width despite having varying numbers of cells? --- output: html_document: theme: cosmo --- {r results ="asis", e ...

htmlcssrknitr

Send data from various components

Utilizing vuejs-wizard for my registration page, I have each tab within a component structured like this: <form-wizard color="#fcab1a" title="" subtitle="" finish-button-text="Register"> <tab-content title="Personal Info" icon="icon-location3 f ...

vue.jsvuejs2vuex

Troubleshooting problem with scrollbar in HTML table within a div element

I'm utilizing Bootstrap for the majority of my CSS. I've split a section into two columns, with the left column displaying a table with data and the right side featuring a Google map. The issue arises when the table row grows, as it doesn't ...

htmlcsshtml-table

Is there a way to connect the YouTube iframe in order to display a pop-up message?

Is it possible to display popup messages when clicking on a YouTube video embedded in an iframe? <a href='login.html?sid=0&keepThis=true&TB_iframe=true&height=240&width=650' class="thickbox" title='test'> ...

htmlyoutube

Creating a drawImg function on the HTML/JavaScript canvas

Attempting to duplicate a specified section of an image onto a canvas below, but finding that the mirrored section is resizing unexpectedly. For example, if given a map image and trying to replicate a building from it exactly below, why does the mirrored s ...

javascripthtmlhtml5-canvas

If the cursor hovers over an image, the onmouseover function does not work properly

Currently, I am developing a PHP page to display data from a database in a tabular format. Each column in the table represents an 'ATC Station'. When active, additional data is displayed upon hovering over the cell. Everything was running smooth ...

javascriptphphtmlevents

Having difficulty refreshing metadata on the client side within Next.js through client-side data retrieval

Having some trouble with updating metadata using NextSeo when fetching data on the client side. useEffect(()=>{ fetch(assetURL) .then((res) => res.json()) .then((data) => { console.log(data); }) .catch((error) => { console.err ...

javascripthtmlreactjsnext.jsseo