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.

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.

• javascript
• jquery
• html
• css

• Interesting request. :) One idea - invisible css blocks above disabled (normal) button? – sinisake Commented Apr 25, 2014 at 22:05
• Why not just make 2 buttons look like one, and use JavaScript to style the other one, if you want action on one to change the other? – StackSlave Commented Apr 25, 2014 at 22:07
• @PHPglue - How would you do that? – PM 77-1 Commented Apr 25, 2014 at 22:09
• Hmm, I'm not sure how I would add text to the buttons to make it look like one... If anyone could make a JSfiddle that would be much appreciated. Thanks so much for your suggestions, though! :D – Toby Mellor Commented Apr 25, 2014 at 22:11
• 1 I would suggest SomeKittens solution, but it is possible to handle the click event and based on the position of the mouse in relation to the button, do different things. – attila Commented Apr 25, 2014 at 22:11

6 Answers 6

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

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/2L8uN/ (and version with styled span padding's)

Using jquery, you should do something like :

$('#splitbutton').click(function(e) {
    if (e.clientX < $(this).offset().left + $(this).outerWidth() / 2)
        console.log('left');
    else
        console.log('right');
});

but i agree, quite unusual UI :)

I had a great idea like this once for the President. One side of the button showered the room with M+Ms, the other started an all-out nuclear war. He said, and I quote, "Great UI man. Always keep 'em guessing!".

(Boom)

A great premade version of what I think you're looking for is the Twitter Bootstrap implementation of "button toolbars". You can check it out here.

http://jsbin./xuyocica/1 pure css and html javascript free