It’s quite important to be able to edit the Submit Comment button on the comment section of the blog pages, especially if you’re not going to use other comment plugins. The default Submit Comment can definitely make your site look unprofessional or a bit aesthetically unpleasing if you leave the default one in. You’d surely want it to go along with the color theme of your website.

So, here’s the tutorial that you can understand and implement in just a few minutes!

Before

After

Video Tutorial:

Tutorial

Step 1: Head over to Theme Customizer to add CSS

Let’s go to the Theme Customizer to add the simple CSS via WordPress dashboard > Divi > Theme Customizer > Additional CSS

Step 2: Add CSS Code & Publish

For the sake of the tutorial, I will add the CSS code to show exactly how the final sample looks. But, don’t worry! You’re welcome to edit them to your liking. Here’s the code

— — —

.form-submit .et_pb_button {
background-color: #0073a9 !important;
font-size: 12px !important;
color: #fff !important;
text-transform: uppercase !important;
padding: 10px 20px 10px 20px !important;
border-radius: 0px !important;
border-width: 0px !important;
}

.form-submit .et_pb_button:hover {
background-color: #00a0d2 !important;
font-size: 12px !important;
color: #fff !important;
text-transform: uppercase !important;
padding: 10px 20px 10px 20px !important;
border-radius: 0px !important;
border-width: 0px !important;
}

— — —

The bolded and italisized text in the code are the CSS properties that you can add, remove or edit. There are too many for of them for me to explain, so it’s best to go to https://www.w3schools.com to know more about them. The possibilities are endless, and it’s quite fun to edit them to how you prefer, too! Go ahead and give it a try!

And then, make sure to click the Publish button!

There you go! Now your Submit Comment button has been changed! It’s quite simple, isn’t it? If this is the first time you have dabbled with CSS, this is a good way to start with. Maybe, now, you can even try to play around the CSS codes of the other elements/modules of the site!

If you have any questions, don’t hesitate to leave a comment, and I will do my best to help!

If you watched the tutorial video, and it helped, I am very happy that it did! Please Like, Comment & Subscribe to my YouTube channel! Thanks!