Button Styles - Material Theme

3 posts, 0 answers
  1. Elliot
    Elliot avatar
    59 posts
    Member since:
    May 2012

    Posted 09 Jun 2015 Link to this post

    Does the material theme support flat buttons?  If so how to I specify the style?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 11 Jun 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Elliot
    Elliot avatar
    59 posts
    Member since:
    May 2012

    Posted 11 Jun 2015 in reply to Iliana Nikolova Link to this post

    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

Back to Top