Button - Read article

Hi Igor,

Try this CSS:

.read-more-container {
    text-align: right;
}

Here's how to add CSS - https://docs.generatepress.com/article/adding-php/

Thanks. It worked.
How can I reduce the border padding on this button?

try adding this CSS:

.read-more-container a {
    padding: 0px;
}

Adjust the value to your preference. :)

Thanks. It worked.
How can I change the style of buttons individually: Post Navigation, Archive Nvigation, Сomment button?

For the comment button try this CSS:

form#commentform p.form-submit input#submit {
    //do your styling here
}

For the archive navigation, your site seems to be using a GP Element for that. Go to Appearance > Elements and check the Block Element responsible for it and edit it from there. :D

How do I make the comment button change the background and font color on hover?

Since it seems to be created w/ a GB button block, you should see this option when you click the button block when you're editing the Block element - https://share.getcloudapp.com/6quYG70l

You can change the colors from this option.

This function is not available for the comment button.

Ah right my bad, I was thinking about the archive buttons.

For the comment button, here's the CSS selector:

form#commentform p.form-submit input#submit:hover {
    background-color: green;
    border: 1px solid green;
    color: pink;
}

form#commentform p.form-submit input#submit{
    transition: all .1s ease-in-out;
}

the transition CSS is optional. It's for animation speed and easing.

Change the values to your preference.

It worked.
Check for errors in the code for the Read Article button.

.read-more-container {
    text-align: right;
}
.read-more-container a {
    padding: 5px;
	  padding-left: 10px;
    padding-right: 10px;
	border: 1px solid;
		border-color: #222222;
	  border-radius: 2px;
	  font-size: 14px;
	  color: #222222;
}
.read-more-container a:hover {
    background-color: #FFF; 
	  color: #222222;
   }

CSS seems fine. Is this fully sorted out for you? Let us know.