How to extend css class with another style?

I have nearly 30 classes and I want to apply this classes to my button element. I don't want to add class attribute for every button element. Is there any way to create a new button class like;

.button{
        .rounded-corner
        .corner
        .button-effective
        //another 20 classes
}

You will have to use a CSS preprocessor to do this.

SASS

placeholder

%rounded-corner {}
%corner {}
%button-effective {}

.button {
  @extend %rounded-corner;
  @extend %corner;
  @button-effective;

  /* Some other styles. */
}

.box {
  @extend %rounded-corner;
}

Compiles to:

.button, .box {
  /* rounded-corner styles */
}

.button {
  /* corner styles here */
}

.button {
  /* button-effective styles here */
}

.button {
  /* Some other styles. */
}

/*
`.box` is NOT defined here because it only uses placeholders. So it
is placed where the placeholder is defined.
*/

Note: with placeholders, the CSS selector is added to wherever the placeholder is defined. Not where the selector is defined.

extend

.rounded-corner {}
.corner {}
.button-effective {}

.button {
  @extend .rounded-corner;
  @extend .corner;
  @extend .button-effective
  // Continue with other classes.
}

Compiles to:

.rounded-corner, .button {}
.corner, .button {}
.button-effective, .button {}

mixin

@mixin rounded-corner {}
@mixin corner {}
@mixin button-effective {}

.button {
  @include .rounded-corner;
  @include .corner;
  @include .button-effective
  // Continue with other classes.
}

Compiles to:

.button {
  /* rounded-corner styles here */
  /* corner styles here */
  /* button-effective styles here */
}

LESS

LESS has a similar sytanx to SASS and also has extend and mixin, though LESS is a little more forgiving if you want to add one class' style to another. While I believe still considered a mixin in LESS, you can add one class style to another like the following without having to use a keyword.

.rounded-corner {}
.corner {}
.button-effective {}

.button {
  .rounded-corner;
  .corner;
  .button-effective;
  // Continue with other classes.
}

Compiles to:

.button {
  /* rounded-corner styles here */
  /* corner styles here */
  /* button-effective styles here */
}

It will be possible in CSS4:

 :root {
  --toolbar-theme: {
    border-radius: 4px;
  };
  --toolbar-title-theme: {
    color: green;
  };
}

.toolbar {
  @apply --toolbar-theme;
  @apply --toolbar-title-theme;
}

For now, you need to use Sass/Less preprocessors.

You could use the attribute selector and concatenate your classes; it would still involve adding a long class to your button element:

<button class="button-rounded-corner-effective">Your button</button>

OR

<button class="button rounded corner effective">Your button</button>
/* Which is exactly what you did not want to do,
   but the CSS below will apply all the same.
   This example to clarify, then. */

... and then your CSS will be:

[class*="button"]{/*Generic button styles*/}
[class*="rounded"]{/*Rounded styles*/}
[class*="corner"]{/*Corner styles*/}
[class*="effective"]{/*Effective styles*/}

You will need to be careful about the namespacing though - the wild card selector will match any class that has that matches the string.

For example:

[class*="round"]{/*Will match rounded*/}

Yes you can use Less or Sass. For me, Less is "easier" to integrate to your project and you will have this code :

.button{
    .rounded-corner
    .corner
    .button-effective
}
.secondClass{
    .button;
    // your style code
}
.thirdClass{
    .button;
    // your style code
}