Input And Button Linking

Horizontally linked buttons

Example:


<div class="linked">
    <button class="btn">Button 1</button><button class="btn">Button 2</button>
    <button class="btn">Button 3</button>
</div>

Result:

Vertically linked buttons

Example:


<div class="linked vertical">
    <button class="btn">Button 1</button><button class="btn">Button 2</button>
    <button class="btn">Button 3</button>
</div>

Result:

Linked buttons and inputs

Example:


<div class="linked">
    <input class="input" />
    <button class="btn">Button 1</button>
</div>

Result:

Linking wrapped buttons

When a button or an input is not a direct sibling of other button and input elements, it container must have a special wrapper class applied to correctly link together.

Example:


<div class="linked">
    <button class="btn">Button 1</button>
    <div class="btn-wrapper">
        <button class="btn">Button 2</button>
    </div>
</div>

Result: