layout - What is the best way to show my users that buttons in the same line have different functionality?

I have four buttons on my interface that all look the same but don't all act the same. They are laid out like the example below.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Button 1 and Button 2 are a modified toggle switch of sorts. If the user clicks Button 1, then it will become selected. The user then has two options. If they click on Button 2, Button 1 will be deselected and Button 2 will become selected. If they click on Button 1 again when it's selected, it will turn off. The same behavior happens for Button 2.

Button 3 and Button 4 are standard on/off toggle switches. Click once to turn it on. Click on the button again to turn it off.

The problem is that since the first two buttons do something different than the second two, I feel like they need to be visually separated. My problem lies in how to separate them since they are somewhat similar in their functionality.

Is there a best practice for laying out buttons with different functionality?

Answer

Checkboxes are often used instead...

For these kinds of togglable, mutually exclusive options. For example:

But if you prefer buttons...

A check mark inside the buttons provides a better toggle affordance, and is also more color-blind friendly:

---

Radio buttons can also be used here for the exclusive buttons, but they (a) require an additional 3rd choice in the UI ("neither") which may or may not be acceptable; and (b) do not meet the click-to-toggle behavior specified in the question.

If you're willing to relax these requirements then radio buttons are an alternative too.