Title: Button flat
Last modified: August 24, 2016

---

# Button flat

 *  [Daiany Zago](https://wordpress.org/support/users/daiany-zago/)
 * (@daiany-zago)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/button-flat/)
 * Hi
    I would like to customize the buttons to flat design. could help me with 
   css?
 * thank you

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/button-flat/#post-6021995)
 * Give us a link to your site and an example of a button you want to change.
 *  Thread Starter [Daiany Zago](https://wordpress.org/support/users/daiany-zago/)
 * (@daiany-zago)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/button-flat/#post-6022132)
 * 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 [http://designmodo.github.io/Flat-UI/](http://designmodo.github.io/Flat-UI/).
 * Thanks
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/button-flat/#post-6022147)
 * 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](https://wordpress.org/support/users/daiany-zago/)
 * (@daiany-zago)
 * [10 years, 11 months ago](https://wordpress.org/support/topic/button-flat/#post-6022151)
 * 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.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/customizr/4.4.24/screenshot.png)
 * Customizr
 * [Support Threads](https://wordpress.org/support/theme/customizr/)
 * [Active Topics](https://wordpress.org/support/theme/customizr/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/customizr/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/customizr/reviews/)

## Tags

 * [button](https://wordpress.org/support/topic-tag/button/)
 * [flat](https://wordpress.org/support/topic-tag/flat/)

 * 4 replies
 * 2 participants
 * Last reply from: [Daiany Zago](https://wordpress.org/support/users/daiany-zago/)
 * Last activity: [10 years, 11 months ago](https://wordpress.org/support/topic/button-flat/#post-6022151)
 * Status: not resolved