Styling post comment 'submit' button

[KenCope]

Hi,

I wonder if you can help me please?

I have managed to customise most areas of a development site but have got stuck with styling the ‘Submit’ button. I’ve looked through the forums, knowledge base and tried several things in the custom css window but without success.

Basically I want to make the outline wider, increase the corner radius add a box drop shadow and remove the text drop shadow.

I’ve managed all this on the sidebar links, but the inbuilt buttons have me stumped!

[jade]

Hi there,

The style of the submit button is the setting you set in X > Theme Options > Buttons.

If you want to style it further, you can use CSS.

Please try this code:

.#commentform #entry-comment-submit {
    text-shadow: none;
    box-shadow: 0 0.25em 0 0 #a71000, 0 4px 9px rgba(0,0,0,0.75);
    padding: 0.563em 2em 0.813em;
    border-radius: 10px;
}

Here are some reference links related to the suggestions above:

• CSS Introduction - https://www.w3schools.com/css/css_intro.asp
• How to get CSS Selectors using Chrome - https://stackoverflow.com/questions/4500572/how-can-i-get-the-css-selector-in-chrome

Hope this helps.

[KenCope]

Hi Jade,

Thanks very much for your help - it was the #entry-comment-submit that I missed - I’m already using the #commentform for the textarea so nested the button code underneath without the #commentform.

All working as expected

Kind regards,

Ken

[jade]

You’re most welcome, Ken.