Title: Change buttons styles
Last modified: August 21, 2016

---

# Change buttons styles

 *  Resolved [benchik](https://wordpress.org/support/users/benchik/)
 * (@benchik)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/change-buttons-styles/)
 * Hello,
    I saw how I can add buttons with Bootstrap style. But how can I change
   the style of all “submit” buttons to have some Bootstrap style? Thanks in advance.

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

 *  [Maria Antonietta Perna](https://wordpress.org/support/users/antonietta456/)
 * (@antonietta456)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/change-buttons-styles/#post-5130378)
 * Hi Benchik,
 * This could be done using CSS. Check out the CSS style rules that are being applied
   to Bootstrap buttons using a developer tool like Firebug. Then in style.css of
   your child theme or custom CSS editor, add a CSS rule that applies those styles
   to the submit buttons. Something like:
 *     ```
       input[type="submit"] {
        /* Bootstrap styles here */
       }
       ```
   
 * If you post a link to your web page where you’ve placed a submit button, it’ll
   be easier to show you.
 * If you find any issues, don’t hesitate to post back.
 * I hope this helps 🙂
    -Maria Antonietta.
 *  Thread Starter [benchik](https://wordpress.org/support/users/benchik/)
 * (@benchik)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/change-buttons-styles/#post-5130506)
 * Hi Maria,
    I tried to find a way to apply the Bootstrap classes to the button.
   But you say I have to copy the Bootstrap styles themselves? My page is: [http://www.beyondrun.com](http://www.beyondrun.com)
   and the button is inside the orange box on the left. I want to apply the “btn
   btn-custom-orange” style. Thanks, Benny.
 *  [Maria Antonietta Perna](https://wordpress.org/support/users/antonietta456/)
 * (@antonietta456)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/change-buttons-styles/#post-5130512)
 * Hi Benny,
 * .btn is a Bootstrap style, but .btn-custom-orange is not. You either slap those
   classes to all input buttons in the template files inside your child theme, which
   is an awfully big job, or copy the styles of the .btn and .btn-custom-orange 
   classes and apply them to the submit buttons in the CSS document of your child
   theme. I tried to mix both these classes inside a single CSS declaration and 
   got this result, but I didn’t have time to test it (I’m about to leave for a 
   few days’ vacation), but you can test it yourself and tweak it as necessary. 
   Here it is:
 *     ```
       .menu-toggle,
       input[type="submit"],
       input[type="button"],
       input[type="reset"],
       article.post-password-required input[type="submit"],
       .bypostauthor cite span {
           background-color: hsl(33, 100%, 39%) !important;
           background-repeat: repeat-x;
           display: inline-block;
           *display: inline;
           filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fea02d", endColorstr="#c66d00");
           background-image: -khtml-gradient(linear, left top, left bottom, from(#fea02d), to(#c66d00));
           background-image: -moz-linear-gradient(top, #fea02d, #c66d00);
           background-image: -ms-linear-gradient(top, #fea02d, #c66d00);
           background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fea02d), color-stop(100%, #c66d00));
           background-image: -webkit-linear-gradient(top, #fea02d, #c66d00);
           background-image: -o-linear-gradient(top, #fea02d, #c66d00);
           background-image: linear-gradient(#fea02d, #c66d00);
           border-color: #c66d00 #c66d00 hsl(33, 100%, 34%);
           border-radius: 0;
           box-shadow: none;
           color: #fff !important;
           margin-bottom: 0;
           *margin-left: .3em;
           font-size: 14px;
           line-height: 20px;
           text-align: center;
           vertical-align: middle;
           text-indent: 0;
           -webkit-border-radius: 4px;
           -moz-border-radius: 4px;
           border-radius: 4px;
           padding: 4px 12px;
           text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
       }
       ```
   
 * It’s quite a big chunk and it applies to all buttons. If anything doesn’t look
   quite right, try tweaking the values.
 * I hope this helps 🙂
 *  Thread Starter [benchik](https://wordpress.org/support/users/benchik/)
 * (@benchik)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/change-buttons-styles/#post-5130516)
 * Thanks,
    I’ll need to tweek :hover but otherwise it works nicely.

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

The topic ‘Change buttons styles’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/tiny-forge/1.6.1/screenshot.png)
 * Tiny Forge
 * [Support Threads](https://wordpress.org/support/theme/tiny-forge/)
 * [Active Topics](https://wordpress.org/support/theme/tiny-forge/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/tiny-forge/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/tiny-forge/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [benchik](https://wordpress.org/support/users/benchik/)
 * Last activity: [11 years, 9 months ago](https://wordpress.org/support/topic/change-buttons-styles/#post-5130516)
 * Status: resolved