Change buttons styles

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.

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: https://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.

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 ??

Thanks,
I’ll need to tweek :hover but otherwise it works nicely.