Question: I am working with drupal 8 and Ubercart. I am trying to change the color of the "Add to cart" button from red to green. Below is the code on each products page.

```
<input name="op" class="button js-form-submit form-submit" id="edit-submit-    32" type="submit" value="Buy Now" data-drupal-selector="edit-submit-32">

```

So what I did in my css file was the following...

```
#edit-submit-32
{
    color: #FFF;
    background-color: #0F3;
    font-weight:bold;
}

```

This obviously worked for this one particular product but I was wondering if there was some CSS I could use that would make this change for all my current products and all future products? The code for each products exactly the same only difference is the id tag for each product. Any help is greatly appreciated.

Answer: 
The first thing I would do is identify if all of these kinds of buttons have a similar parent container and then use that as a parent selector:

```
<div class="add-to-cart-wrapper">
  <input name="op" class="button js-form-submit form-submit" id="edit-submit-    32" type="submit" value="Buy Now" data-drupal-selector="edit-submit-32">
</div>

.add-to-cart-wrapper .button {  
  color: #FFF;
  background-color: #0F3;
  font-weight:bold;
}

```

Without more HTML context, I can't provide what the actual parent selector would be - *but for sake of example* I have added a div with the class "add-to-cart-wrapper". You would replace this selector with an applicable one.

It's also a good rule of thumb to try and use classes rather than IDs for your CSS.
If you wouldn't mind changing all submit buttons, this would work:

```
.form-submit
{
    color: #FFF;
    background-color: #0F3;
    font-weight:bold;
}

```

Or, if all of the buttons have value="Buy Now", then you could do this:

```
input[value="Buy Now"]
{
    color: #FFF;
    background-color: #0F3;
    font-weight:bold;
}​

```