How to have one class have three different colors? - html

Question

I am working with a template. The client is wanting the three buttons different colors. All three are controlled by the same class. I can change the background color to be different if I inspect the page and I can insert it in the element style. How can I make this change permanent in the CSS?
This is the current buttons:
This is how the client would like the buttons:
The CSS controlling this is:
.full-width .generic .third p a {
background-color: #543D91;
border-bottom: 1px solid #fff;
color: #fff;
display: block;
float: left;
padding: 10px 0;
width: 100%;
border-radius: 99em;
}
How can I change this so that each button is a different color? Is this even possible? It has to be done in CSS. I can not use JavaScript/jQuery or anything like it. It has to work in a JSFiddle in only the CSS and HTML. Note that the HTML is created only the label for each button. I cannot make the hyperlink have a style.
If this is not possible can you please give me the codes that I can have 3 images centered with buttons in a container that is 900px with padding between? I appreciate everyones help!

Answer 1

You could use 2 classes and create a CSS like:
.cls {
color: #FFF;
padding: 10px 0;
width: 30%;
}
.c1 {
background-color: #F00;
}
.c2 {
background-color: #0F0;
}
.c3 {
background-color: #00F;
}
<button class="cls c1">Button1</button>
<button class="cls c2">Button2</button>
<button class="cls c3">Button3</button>

Answer 2

I have tried to solve your question using jQuery, try and have a look, it's simple and works like magic:
This is the dummy HTML:
<div id="searchable">
<a>
Something
</a>
<button>
Something
</button>
<a>
Something2
</a>
<button>
Something2
</button>
<a>
Something3
</a>
<button>
Something3
</button>
</div>
This is the required jQuery for this:
var buttons = $("#searchable").find("button");
var color = ["red", "blue", "green"];
buttons.each(function(i){
$(this).css('color', color[i]);
});
Here is a link to my fiddle:
https://jsfiddle.net/x5ve63w5/1/