[Solved] Button Styles - Material Theme

[Elliot]

Does the material theme support flat buttons?  If so how to I specify the style?

[Iliana Dyankova]

Hi Elliot,

If I understand correctly you would like to remove the box-shadow of Kendo UI Button? This can be achieved using the following CSS rule:

.k-button,
.k-button:hover,
.k-button.k-state-hover,
.k-button.k-state-focused,
.k-button:focus,
.k-button:focus:not(.k-state-disabled):not([disabled]),
.k-button:focus:active:not(.k-state-disabled):not([disabled]) {
    box-shadow: none;
}

Regards,
Iliana Nikolova
Telerik

 

 

[Elliot]

Thanks.  I ended up creating a new class (.k-button-flat) that I assign to the button I want to be flat and used the following css:

.k-button.k-button-flat:not(:hover):not(:focus){
    background-color: transparent;
    border-color: transparent;
}

.k-button.k-button-flat,
.k-button.k-button-flat:hover,
.k-button.k-button-flat.k-state-hover,
.k-button.k-button-flat.k-state-focused,
.k-button.k-button-flat:focus,
.k-button.k-button-flat:focus:not(.k-state-disabled):not([disabled]),
.k-button.k-button-flat:focus:active:not(.k-state-disabled):not([disabled]) {
    box-shadow: none;
}

to support https://material.angularjs.org/latest/#/demo/material.components.button