Change a specific button's color

Question

I want to change the color code on specific code but it changes the color on all the buttons on site how do i specificly only change one of the buttons?

media="all"
button.button span {
 display: block;
 padding: 17px 60px 17px;
 font: normal 17px/19px Open Sans, Arial, Helvetica, sans-serif;
 text-align: center;
 white-space: nowrap;
 background: #0095DB;
 color: #fff;
 text-transform: uppercase;

Answer 1

The code you have applies to all span's inside of the specified classes. You'll need to update the HTML code for the span that you are using to something like this:

<span class="my-color-button">Whatever is in there now</span>

Then in the .css you'd update it to contain code like:

.my-color-button { display: block; padding: .... etc..

• Kevin Hill: You could also use id="my-color-button" on the span as well - and then reference it as #my-color-button in the .css file. (as stated by RiccardoT)

Answer 2

Check if the button has a specific id. If not add your own id attribute to it by changing its phtml file.

After that just add in your css:

#your_button_id {
...
}

And define inside the background and the color you need.

Answer 3

additionally, you can retain the properties of the original button quite easily if you'd like.

<button class="button my-button" ...>

and then with this css - you can change the color of that button only

.my-button {
background-color: #2A2A2A;
color: #FFFFFF;
}