Two buttons, one page, two different colors

Hello.

First things first, I'm extremely, HUGELY ignorant abour codification. But I have my website almost finished and I don't want to call a designer after I managed to solve every single question I had along the way (which I assume are very silly questions but an endeavor I'm very proud of). My website has became a sort of a hobby and like all hobbysts I want it all to myself. 

As a matter of fact, is not a very complex website. It's more photograph album family. Had it been professional or with intention to monetize I'd called the designer hands down.

But in the last inch of the field I came across the dreaded codification...

I just want to put in some pages (not all of them) two buttons with different color, say blue and green one on top of the other. In some pages there'll be several of these couples of buttons, in some just one couple, in some just one button, in some none at all. 

In my ignorance, I'm assuming it's an easy piece of code I can insert in the CSS editor in the Design module. But of course, if it's too hard I don't want to abuse anybody asking for something very expensive in the market. 

Can you help me or should I remove completely this feature of the album?

Regards. 

Hello. 

Now, usign a Block Identifier Plugin for Chrome I've managed to change the specific button.

#block-98f4117fe9611e045cba .sqs-block-button-element--small {color: #0000ff; border-color: #0000ff;}

Now there only remains to change the color when hover with the cursor. I understand this is the code I need 

.btn1:hover {      background-color: #0000ff;      color: white; }

But I don't understand the syntax. Should How do I join those two codes?

Regards

#block-98f4117fe9611e045cba .sqs-block-button-element--small {
  color: #0000ff; 
  border-color: #0000ff;
}
#block-98f4117fe9611e045cba .sqs-block-button-element--small:hover {
	background: red;
	color: black;
}

Blessings! You've been most helpful, Tuanphan. Thanks a lot

Hello everyone and thank you for so useful tip.

I've downloaded Block Identifier Plugin for Chrome so I get the button ID: #block-f74f43e2ad2fe1d526db

but I don't know how to get this: .sqs-block-button-element--small...

Is it in any part of my pages that I can get it?

Thank you very much.

6 minutes ago, Montse_Soria said:

Hello everyone and thank you for so useful tip.

 

I've downloaded Block Identifier Plugin for Chrome so I get the button ID: #block-f74f43e2ad2fe1d526db

but I don't know how to get this: .sqs-block-button-element--small...

Is it in any part of my pages that I can get it?

Thank you very much.

Hover on button > Right Click > Inspect Element

Thank you very much tuanphan

At the moment I am not been able to solve it, even with your explanation, but it's been very useful and I hope I could soon 😉

----

Hello everyone and thank you for so useful tip.

I've downloaded Block Identifier Plugin for Chrome so I get the button ID: #block-f74f43e2ad2fe1d526db

but I don't know how to get this: .sqs-block-button-element--small...

Is it in any part of my pages that I can get it?

Thank you very much.

Finally, I could get it!!!

Thank you very much!