This is a migrated thread and some comments may be shown as answers.

Button Styles - Material Theme

2 Answers 235 Views
Button
This is a migrated thread and some comments may be shown as answers.
Elliot
Top achievements
Rank 1
Elliot asked on 09 Jun 2015, 08:27 PM
Does the material theme support flat buttons?  If so how to I specify the style?

2 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 11 Jun 2015, 10:18 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Elliot
Top achievements
Rank 1
answered on 11 Jun 2015, 01:14 PM

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

Tags
Button
Asked by
Elliot
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Elliot
Top achievements
Rank 1
Share this question
or