The default comment button rarely matches a site’s design. You can restyle it with CSS – the safest place is Appearance → Customize → Additional CSS (classic themes), the Site Editor’s custom CSS (block themes), or a child theme stylesheet.
The CSS
/* Post Comment button */n#commentform .form-submit .submit,n#comments .form-submit input#submit {n padding: 12px 24px;n font-size: 16px;n font-weight: 600;n background-color: #0369a1;n color: #ffffff;n border: none;n border-radius: 999px;n cursor: pointer;n transition: background-color .2s ease, transform .2s ease;n}nn#commentform .form-submit .submit:hover,n#commentform .form-submit .submit:focus-visible {n background-color: #075985;n transform: translateY(-1px);n}nn#commentform .form-submit .submit:focus-visible {n outline: 3px solid #7dd3fc;n outline-offset: 2px;n}Adjusting it
| Property | Change it to… |
|---|---|
padding | Make the button taller/wider |
background-color / color | Match your brand – keep at least 4.5:1 contrast for accessibility |
border-radius | 0 for square, 6px for slightly rounded, 999px for a pill |
:hover rules | The colour shown when the mouse is over the button |
Selector not working?
Some themes use a different ID or class. Right-click the button → Inspect to see its selector, and use that instead. If the theme’s own rules win, make your selector more specific rather than adding !important.
Écrit par
Inder Kochar
Ingénieur systèmes et réseaux – Je rédige les solutions que j’applique chez mes clients, testées sur de vrais systèmes. Bloqué sur un problème similaire ?
