Default button

Default style for buttons is set by the .lib-button() mixin. The mixin is called in .lib-magento-reset() or it can be called directly.

Default button large

<button class="example-button-1 example-button-2" type="button"><span>Button</span></button> <button class="example-button-1 example-button-2 :hover" type="button"><span>Hover</span></button> <button class="example-button-1 example-button-2 :active" type="button"><span>Active</span></button> <button class="example-button-1 example-button-2" type="button" disabled><span>Disabled</span></button>

Default button

<button class="example-button-1" type="button"><span>Button</span></button> <button class="example-button-1 :hover" type="button"><span>Hover</span></button> <button class="example-button-1 :active" type="button"><span>Active</span></button> <button class="example-button-1" type="button" disabled><span>Disabled</span></button>

Default button small

<button class="example-button-1 example-button-3" type="button"><span>Button</span></button> <button class="example-button-1 example-button-3 :hover" type="button"><span>Hover</span></button> <button class="example-button-1 example-button-3 :active" type="button"><span>Active</span></button> <button class="example-button-1 example-button-3" type="button" disabled><span>Disabled</span></button>

button {
    .lib-button(@_button-margin: 3px);
    border-radius: 3px;
    &:active,
    &:focus {
        box-shadow: inset 0 2px 1px rgba(0,0,0,.12);
    }
}

.example-button-1 {
    &.example-button-2 {
        .lib-button-l();
    }
    &.example-button-3 {
        .lib-button-s();
        border-radius: 0;
        color: #000;
        &:hover,
        &.active {
            color: #000;
        }
    }
}