Multi Class in Html

Question

I have a button with the following set of w3.css classes:

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<button class="w3-btn w3-lime w3-hover-green  w3-round-large w3-border w3-border-green w3-ripple">Button</button>

This will be a common theme throughout my website. Instead of writing this list of all these classes on each and every button, how can I get this group of classes into a single class mybuttonclass like:

<button class="mybuttonclass">Button</button>

Answer 1

Are you familiar with CSS pre-compilers such as LESS? You could make a class of classes. Which would look like:

.mybuttonclass {
  .w3-btn;
  .w3-lime;
  .w3-hover-green;
  .w3-round-large;
  .w3-border;
  .w3-border-green;
  .w3-ripple;
}

Otherwise, you would have to manually copy all of the CSS properties into one class.

Answer 2

May be you can add a little bit of jquery, which might be a solution:

if ($('button').hasClass('mybuttonclass')) {
    $('button').removeClass('mybuttonclass'); //optional according to your theme requirements
    $('button').addClass('w3-btn w3-lime w3-hover-green  w3-round-large w3-border w3-border-green w3-ripple');
}

Answer 3

If these classes are common, can you not copy/merge them into a specific class?

I tend to keep a common button class (normally called 'btn') and an individual class, ending up with...

 <button class="btn my_other_class">Button</button>

Answer 4

Inheritance isn't supported by css id/class.

.mybuttonclass,
.class1 {
    property1: value1;
}

.mybuttonclass,
.class2 {
    property2: value2;
}

.mybuttonclass,
.class3 {
    property3: value3;
}

Or you have to use "Sass" or "Less" for example.

Sass:

.mybuttonclass {
  @extend .class1;
  @extend .class2;
  @extend .class3;
}

Answer 5

You need to copy all the properties of all those classes into a single one. A manual job I'm afraid :) You can use the developer tools in your browser to see those and copy them out.

.class1 {
    property1: value1;
}

.class2 {
    property2: value2;
}

.class3 {
    property3: value3;
}

.mybuttonclass {
    property1: value1;
    property2: value2;
    property3: value3;
}