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.
Escrito por
Inder Kochar
Ingeniero de sistemas y redes – Documento las soluciones que aplico con mis clientes, probadas en sistemas reales. ¿Atascado con algo parecido?
