Viewing 4 replies - 1 through 4 (of 4 total)
  • Give us a link to your site and an example of a button you want to change.

    Thread Starter Daiany Zago

    (@daiany-zago)

    My site is not plublicado’m working with him place. The buttons are as the default theme. I would like to have them like this https://designmodo.github.io/Flat-UI/.

    Thanks

    A Czr button using green.css uses this CSS:

    .btn {
        display: inline-block;
        padding: 4px 12px;
        margin-bottom: 0px;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        color: #333;
        text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75);
        background-color: #F5F5F5;
        background-image: linear-gradient(to bottom, #FFF, #E6E6E6);
        background-repeat: repeat-x;
        border-width: 1px;
        border-style: solid;
        border-color: #CCC #CCC #B3B3B3;
        -moz-border-top-colors: none;
        -moz-border-right-colors: none;
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        border-image: none;
        border-radius: 4px;
        box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
    }
    .btn-primary {
        color: #FFF;
        text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
        background-color: #8DA65A;
        background-image: linear-gradient(to bottom, #9DB668, #768D44);
        background-repeat: repeat-x;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    }

    A similar button in Flat UI uses this code:

    .btn {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0px;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42857;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        -moz-user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
    }
    .btn-primary {
        color: #FFF;
        background-color: #428BCA;
        border-color: #357EBD;
    }
    .btn-block {
        white-space: normal;
    }
    .btn-lg, .btn-group-lg > .btn {
        padding: 10px 19px;
        font-size: 17px;
        line-height: 1.471;
        border-radius: 6px;
    }

    There will be further complexities but comparing the 2 gives you some idea of the changes you’ll need to make.

    Thread Starter Daiany Zago

    (@daiany-zago)

    Thank you very much!!!
    I will do the tests.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Button flat’ is closed to new replies.