CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Toby Mellor
Toby Mellor

Reputation: 8205

Merge two button elements as one

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.

Upvotes: 4

Views: 6213

Answers (6)

SomeKittens
SomeKittens

Reputation: 39532

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:

split button

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

Upvotes: 10

Waheed Rahman
Waheed Rahman

Reputation: 82

http://jsbin.com/xuyocica/1 pure css and html javascript free
enter image description here

Upvotes: 0

Sam Hanley
Sam Hanley

Reputation: 4755

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.

Upvotes: 0

dfsq
dfsq

Reputation: 193261

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)

Upvotes: 4

LiverpoolsNumber9
LiverpoolsNumber9

Reputation: 2394

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)

Upvotes: 0

luciole75w
luciole75w

Reputation: 1117

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 :)

Upvotes: 2

Related Questions