How to make custom TinyMCE buttons that function like "bold", "italic", etc.?

I’m trying to add buttons to my TinyMCE visual editor. Specifically, I want to add a <code></code> button and a <cite></cite> button.

I’ve found a tutorial that creates a code button. When clicked, it wraps the selected text in <code></code> tags. This is great, and is partially what I’d like. However, I’d love to bring the behavior of my custom buttons in line with other buttons, like the bold and italic buttons.

Let me explain what I mean. If you have text selected in the editor and you click the “bold” button, it wraps the selected text in <strong></strong> tags. So far, that resembles the button I have. But if you don’t have any text selected as you click the “bold” button, instead of inserting an empty <strong></strong> element, it creates an opening <strong> tag, and the button displays as depressed. When you press the button again, it ends the element and the button returns to its default unselected state.

Given that I’ve added the “code” button via a plugin, as explained in the tutorial I linked, what do I need to do to get the functionality I’ve explained?

Thanks!