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.
Geschrieben von
Inder Kochar
System- & Netzwerkingenieur – Ich schreibe die Lösungen auf, die ich bei Kunden einsetze – getestet auf echten Systemen. Hängen Sie an etwas Ähnlichem fest?
