Like any other error, be clear to the user what happened and ideally give them a path to recovery if possible.
You're focusing on the button state, but it sounds like what the user needs is the result of the button push: they are expecting content below on the page.
The button hasn't failed; it's the system state as a result of the button.
I don't know what the rest of the view looks like, but here's a shot that places the error prominently in the area I assume (correct me if I'm wrong) they are looking to load with their choice:
download bmml source – Wireframes created with Balsamiq Mockups
You might want to read: Error message guidelines, from Nielsen Norman:
Established wisdom holds that good error messages are polite, precise, and constructive. The Web brings a few new guidelines: Make error messages clearly visible, reduce the work required to fix the problem, and educate users along the way.
In your mock above, you are using color as the sole indicator. That leaves color blind users thinking that the button is in an active state (like it's pressed), since they may not be able to see Reds.
Try an icon, plus a helpful error message. It needs to be noticeable.
Users will want to understand what happened, and how to move forward (if they can). Differentiate what type of error this is.
Remember, when users don't see any change on the page, or when the content below disappears they may ask themselves:
- what happened?
- was it my fault?
- if it's the systems fault, when will it correct itself?
- are there no 'Nature' blog posts? (which means no results is different than failure to load; it's not an error)
- what do I do now?