The button styling example does not seem to work

aviennas

In the following example for styling buttons, it does not seem to work. The buttons are supposed to appear in color.
Can anybody confirm and explain how to style buttons, following the framework's approach?

kthorngren

The CSS tab of the example has this:

.dt-button.red {
        color: red;
    }
 
    .dt-button.orange {
        color: orange;
    }
 
    .dt-button.green {
        color: green;
    }

Inspecting the buttons it will show that the CSS is being overridden by a more specific selector:

You can apply a more specific selector or use !important.

.dt-button.red {
  color: red !important;
}

div.dt-buttons > .dt-button.orange {
  color: orange;
}

div.dt-buttons > .dt-button.green {
  color: green;
}

For example:
https://live.datatables.net/wayicuyo/1/edit

@allan will need to update the example. Thanks for pointing it out.

Kevin

allan

Correction for the CSS committed here (the "green" does clash horribly with some of the styling framework defaults, but hopefully we all realise that it is just a demo showing the principle rather than actually suggesting you have green text on blue buttons which is what it ends up as in Foundation!). Will be deployed to the site soon.

As Kevin says - thank you for highlighting that.

Allan

aviennas

Thank you too! Greetings!