Merge two button elements as one

Question

I was wondering how to go about making a button that looks like a normal button, but the right side does X and the right side does Y.

For example, when I click the left side of this button it runs one form. I click the right side and it runs another form. The button needs to look like a normal button, so the user would only see one button.

Answer 1

This sounds like horrible UI. The user should be able to see the difference between the buttons. You should create two buttons in a 'pill' formation as such:

By applying a negative margin to the second button:

#second-button {
    margin-left: -4px;
}

JSFiddle

If you still want to, you can remove the borders to make them merge in to one:

JSFiddle

Answer 2

Something like this would work:

<button>
    <span class="left-part">Button</span>
    <span class="right-part">value</span>
</button>

Then you can bind different event listeners to the left and right spans.

Demo: http://jsfiddle.net/2L8uN/ (and version with styled span padding's)