This time I don't get button:hover to work.

Hope you are doing well today, hopefully I can be of some help.

I think the issue here is that you need to change the background color of the .content span as well as the background of .button1. So in order to get the main/top part of your button to change color on hover, you would need to do something like this:

.button1:hover .content {
  background-color: green;
}

This tells the browser than when you hover over your .button1 element, you want it to change the background color of the child .content span, which should do the trick.

Also, you need to remove the box-shadow: 0 6px 0 #06c declaration from your .button1 .content & .button2 .content rule. This declaration is not needed, and it causing your button background to be hidden behind it. So by removing this, you should notice that you can now see the background of the button change to the color you specified.

From here you can tweak the colors however you like, and set up .button2 the same way. Hope this was helpful in solving your issue!