Combine two button elements as one

Question

I was wondering how to make a button look like a regular button, but the right side is X and the right side is Y.

For example, when I click the left side of this button, it launches one form. I click on the right side and it launches another shape. The button should look like a regular button, so the user will see only one button.

Answer 1

It sounds like a terrible user interface. The user should be able to see the difference between the buttons. You should create two buttons in the form of a “tablet” as such:

Applying negative margin to the second button:

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

Jsfiddle

, , :

JSFiddle

Answer 2

- :

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

span s.

: http://jsfiddle.net/2L8uN/ ( )

Answer 3

jquery, - :

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

, :)

Answer 4

, . M + Ms, . , : " . !".

()

Answer 5

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

Answer 6

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