CommandButton

<style>
    button.ui-button {
        margin-right: .5rem;
    }
</style>

<div class="card">
    <h5>Basic</h5>
    <p:commandButton type="button" value="Submit" />
    <p:commandButton type="button" value="Disabled" disabled="true" />

    <h5>Icons</h5>
    <p:commandButton type="button" icon="pi pi-check" title="Save"/>
    <p:commandButton type="button" value="Submit" icon="pi pi-check" />
    <p:commandButton type="button" value="Submit" icon="pi pi-check" iconPos="right" />

    <h5>Severities</h5>
    <p:commandButton type="button" value="Primary" />
    <p:commandButton type="button" value="Secondary" styleClass="ui-button-secondary" />
    <p:commandButton type="button" value="Success" styleClass="ui-button-success" />
    <p:commandButton type="button" value="Info" styleClass="ui-button-info" />
    <p:commandButton type="button" value="Warning" styleClass="ui-button-warning" />
    <p:commandButton type="button" value="Help" styleClass="ui-button-help" />
    <p:commandButton type="button" value="Danger" styleClass="ui-button-danger" />

    <h5>Raised Buttons</h5>
    <p:commandButton type="button" value="Primary" styleClass="ui-button-raised" />
    <p:commandButton type="button" value="Secondary" styleClass="ui-button-raised ui-button-secondary" />
    <p:commandButton type="button" value="Success" styleClass="ui-button-raised ui-button-success" />
    <p:commandButton type="button" value="Info" styleClass="ui-button-raised ui-button-info" />
    <p:commandButton type="button" value="Warning" styleClass="ui-button-raised ui-button-warning" />
    <p:commandButton type="button" value="Help" styleClass="ui-button-raised ui-button-help" />
    <p:commandButton type="button" value="Danger" styleClass="ui-button-raised ui-button-danger" />

    <h5>Rounded Buttons</h5>
    <p:commandButton type="button" value="Primary" styleClass="rounded-button" />
    <p:commandButton type="button" value="Secondary" styleClass="rounded-button ui-button-secondary" />
    <p:commandButton type="button" value="Success" styleClass="rounded-button ui-button-success" />
    <p:commandButton type="button" value="Info" styleClass="rounded-button ui-button-info" />
    <p:commandButton type="button" value="Warning" styleClass="rounded-button ui-button-warning" />
    <p:commandButton type="button" value="Help" styleClass="rounded-button ui-button-help" />
    <p:commandButton type="button" value="Danger" styleClass="rounded-button ui-button-danger" />

    <h5>Flat Buttons</h5>
    <p:commandButton type="button" value="Primary" styleClass="ui-button-flat" />
    <p:commandButton type="button" value="Secondary" styleClass="ui-button-secondary ui-button-flat" />
    <p:commandButton type="button" value="Success" styleClass="ui-button-success ui-button-flat" />
    <p:commandButton type="button" value="Info" styleClass="ui-button-info ui-button-flat" />
    <p:commandButton type="button" value="Warning" styleClass="ui-button-warning ui-button-flat" />
    <p:commandButton type="button" value="Help" styleClass="ui-button-help ui-button-flat" />
    <p:commandButton type="button" value="Danger" styleClass="ui-button-danger ui-button-flat" />
    <p:commandButton type="button" value="Plain" styleClass="ui-button-flat ui-button-plain" />

    <h5>Raised Text Buttons</h5>
    <p:commandButton type="button" value="Primary" styleClass="ui-button-raised ui-button-flat" />
    <p:commandButton type="button" value="Secondary" styleClass="ui-button-raised ui-button-secondary ui-button-flat" />
    <p:commandButton type="button" value="Success" styleClass="ui-button-raised ui-button-success ui-button-flat" />
    <p:commandButton type="button" value="Info" styleClass="ui-button-raised ui-button-info ui-button-flat" />
    <p:commandButton type="button" value="Warning" styleClass="ui-button-raised ui-button-warning ui-button-flat" />
    <p:commandButton type="button" value="Help" styleClass="ui-button-raised ui-button-help ui-button-flat" />
    <p:commandButton type="button" value="Danger" styleClass="ui-button-raised ui-button-danger ui-button-flat" />
    <p:commandButton type="button" value="Plain" styleClass="ui-button-raised ui-button-flat ui-button-plain" />

    <h5>Outlined Buttons</h5>
    <p:commandButton type="button" value="Primary" styleClass="ui-button-outlined" />
    <p:commandButton type="button" value="Secondary" styleClass="ui-button-outlined ui-button-secondary" />
    <p:commandButton type="button" value="Success" styleClass="ui-button-outlined ui-button-success" />
    <p:commandButton type="button" value="Info" styleClass="ui-button-outlined ui-button-info" />
    <p:commandButton type="button" value="Warning" styleClass="ui-button-outlined ui-button-warning" />
    <p:commandButton type="button" value="Help" styleClass="ui-button-outlined ui-button-help" />
    <p:commandButton type="button" value="Danger" styleClass="ui-button-outlined ui-button-danger" />

    <h5>Rounded Icon Buttons</h5>
    <p:commandButton type="button" icon="pi pi-bookmark" styleClass="rounded-button ui-button-secondary" />
    <p:commandButton type="button" icon="pi pi-search" styleClass="rounded-button ui-button-success" />
    <p:commandButton type="button" icon="pi pi-user" styleClass="rounded-button ui-button-info" />
    <p:commandButton type="button" icon="pi pi-bell" styleClass="rounded-button ui-button-warning" />
    <p:commandButton type="button" icon="pi pi-heart" styleClass="rounded-button ui-button-help" />
    <p:commandButton type="button" icon="pi pi-times" styleClass="rounded-button ui-button-danger" />
    <p:commandButton type="button" icon="pi pi-check" styleClass="rounded-button" />

    <h5>Rounded Text Icon Buttons</h5>
    <p:commandButton type="button" icon="pi pi-check" styleClass="rounded-button ui-button-flat" />
    <p:commandButton type="button" icon="pi pi-bookmark" styleClass="rounded-button ui-button-secondary ui-button-flat" />
    <p:commandButton type="button" icon="pi pi-search" styleClass="rounded-button ui-button-success ui-button-flat" />
    <p:commandButton type="button" icon="pi pi-user" styleClass="rounded-button ui-button-info ui-button-flat" />
    <p:commandButton type="button" icon="pi pi-bell" styleClass="rounded-button ui-button-warning ui-button-flat" />
    <p:commandButton type="button" icon="pi pi-heart" styleClass="rounded-button ui-button-help ui-button-flat" />
    <p:commandButton type="button" icon="pi pi-times" styleClass="rounded-button ui-button-danger ui-button-flat" />
    <p:commandButton type="button" icon="pi pi-filter" styleClass="rounded-button ui-button-flat ui-button-plain" />

    <h5>Rounded and Outlined Icon Buttons</h5>
    <p:commandButton type="button" icon="pi pi-check" styleClass="rounded-button ui-button-outlined" />
    <p:commandButton type="button" icon="pi pi-bookmark" styleClass="rounded-button ui-button-secondary ui-button-outlined" />
    <p:commandButton type="button" icon="pi pi-search" styleClass="rounded-button ui-button-success ui-button-outlined" />
    <p:commandButton type="button" icon="pi pi-user" styleClass="rounded-button ui-button-info ui-button-outlined" />
    <p:commandButton type="button" icon="pi pi-bell" styleClass="rounded-button ui-button-warning ui-button-outlined" />
    <p:commandButton type="button" icon="pi pi-heart" styleClass="rounded-button ui-button-help ui-button-outlined" />
    <p:commandButton type="button" icon="pi pi-times" styleClass="rounded-button ui-button-danger ui-button-outlined" />

    <h5>Ajax Disabling and Status Icon</h5>
    <h:form>
        <p:commandButton value="Keep Enabled" disableOnAjax="false" action="#{buttonBasicView.sleep()}" />
        <p:commandButton value="Icon Left" icon="pi pi-check" action="#{buttonBasicView.sleep()}" />
        <p:commandButton value="Icon Right" icon="pi pi-check" iconPos="right" action="#{buttonBasicView.sleep()}" />
        <p:commandButton value="Custom" styleClass="custom" action="#{buttonBasicView.sleep()}" />
    </h:form>
    <style>
        html body .custom.ui-button.ui-button-text-only .ui-icon-loading {
            opacity: 0;
        }
        html body .custom.ui-button.ui-button-text-only .ui-icon-loading:before {
            content: "\e94a";
        }
        html body .custom.ui-button, html body .custom.ui-button * {
            transition-property: all;
            transition-duration: .2s;
        }
        html body .custom.ui-button.ui-state-loading {
            opacity: 1;
            background: #888;
            border-color: #888;
        }
        html body .custom.ui-button.ui-state-loading.ui-button-text-only .ui-button-text {
            opacity: 1;
            padding-left: 2rem;
        }
        html body .custom.ui-button.ui-state-loading.ui-button-text-only .ui-icon-loading {
            opacity: 1;
            left: 0;
            margin-left: 0.5rem;
        }
    </style>
</div>