- var prism = true; - var clipboard = true; - var customcard = true; - var theme_customizer = true; - var sidebar = true; - var scrollbar = true; doctype html html(lang='en') include ../../components/header-files body include ../../components/loader // page-wrapper Start #pageWrapper.page-wrapper include ../../components/header // Page Body Start .page-body-wrapper.horizontal-menu include ../../components/sidebar .page-body .container-fluid .page-header .row .col-sm-6 h3 | Raised Buttons ol.breadcrumb li.breadcrumb-item a(href='index.html') | Home li.breadcrumb-item Buttons li.breadcrumb-item.active Raised Style .col-sm-6 include ../../components/bookmark // Container-fluid starts .container-fluid .row .col-sm-12 .card .card-header.pb-0 h5 Default buttons .setting-list ul.list-unstyled.setting-option li .setting-primary i.icon-settings li i.view-html.fa.fa-code.font-primary li i.icofont.icofont-maximize.full-card.font-primary li i.icofont.icofont-minus.minimize-card.font-primary li i.icofont.icofont-refresh.reload-card.font-primary li i.icofont.icofont-error.close-card.font-primary span | Add code .btn-pill | and code .btn-air-* | class for raised button .card-body.btn-showcase button.btn.btn-pill.btn-primary.btn-air-primary(type='button' title='btn btn-pill btn-primary btn-air-primary') Primary Button button.btn.btn-pill.btn-secondary.btn-air-secondary(type='button' title='btn btn-pill btn-secondary btn-air-secondary') Secondary Button button.btn.btn-pill.btn-success.btn-air-success(type='button' title='btn btn-pill btn-success btn-air-success') Success Button button.btn.btn-pill.btn-info.btn-air-info(type='button' title='btn btn-pill btn-info btn-air-info') Info Button button.btn.btn-pill.btn-warning.btn-air-warning(type='button' title='btn btn-pill btn-warning btn-air-warning') Warning Button button.btn.btn-pill.btn-danger.btn-air-danger(type='button' title='btn btn-pill btn-danger btn-air-danger') Danger Button button.btn.btn-pill.btn-light.btn-air-light(type='button' title='btn btn-pill btn-light btn-air-light') Light Button .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#example-head | <!-- Cod Box Copy begin --> | <button type="button" class="btn btn-pill btn-primary btn-air-primary">Primary button</button> | <button type="button" class="btn btn-pill btn-secondary btn-air-secondary">Secondary button</button> | <button type="button" class="btn btn-pill btn-success btn-air-success">Success button</button> | <button type="button" class="btn btn-pill btn-info btn-air-info">Info button</button> | <button type="button" class="btn btn-pill btn-warning btn-air-warning">Warning button</button> | <button type="button" class="btn btn-pill btn-danger btn-air-danger">Danger button</button> | <button type="button" class="btn btn-pill btn-light btn-air-light">Light button</button> | <!-- Cod Box Copy end --> .card .card-header.pb-0 h5 Large buttons .setting-list ul.list-unstyled.setting-option li .setting-primary i.icon-settings li i.view-html.fa.fa-code.font-primary li i.icofont.icofont-maximize.full-card.font-primary li i.icofont.icofont-minus.minimize-card.font-primary li i.icofont.icofont-refresh.reload-card.font-primary li i.icofont.icofont-error.close-card.font-primary span | Add code .btn-pill | , code .btn-air-* | and code .btn-lg | class for large button .card-body.btn-showcase button.btn.btn-pill.btn-primary.btn-air-primary.btn-lg(type='button' title='btn btn-pill btn-primary btn-air-primary btn-lg') Primary Button button.btn.btn-pill.btn-secondary.btn-air-secondary.btn-lg(type='button' title='btn btn-pill btn-secondary btn-air-secondary btn-lg') Secondary Button button.btn.btn-pill.btn-success.btn-air-success.btn-lg(type='button' title='btn btn-pill btn-success btn-air-success btn-lg') Success Button button.btn.btn-pill.btn-info.btn-air-info.btn-lg(type='button' title='btn btn-pill btn-info btn-air-info btn-lg') Info Button button.btn.btn-pill.btn-warning.btn-air-warning.btn-lg(type='button' title='btn btn-pill btn-warning btn-air-warning btn-lg') Warning Button button.btn.btn-pill.btn-danger.btn-air-danger.btn-lg(type='button' title='btn btn-pill btn-danger btn-air-danger btn-lg') Danger Button button.btn.btn-pill.btn-light.btn-air-light.btn-lg(type='button' title='btn btn-pill btn-light btn-air-light btn-lg') Light Button .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head1', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#example-head1 | <!-- Cod Box Copy begin --> | <button type="button" class="btn btn-pill btn-primary btn-air-primary btn-lg">Primary button</button> | <button type="button" class="btn btn-pill btn-secondary btn-air-secondary btn-lg">Secondary button</button> | <button type="button" class="btn btn-pill btn-success btn-air-success btn-lg">Success button</button> | <button type="button" class="btn btn-pill btn-info btn-air-info btn-lg">Info button</button> | <button type="button" class="btn btn-pill btn-warning btn-air-warning btn-lg">Warning button</button> | <button type="button" class="btn btn-pill btn-danger btn-air-danger btn-lg">Danger button</button> | <button type="button" class="btn btn-pill btn-light btn-air-light btn-lg">Light button</button> | <!-- Cod Box Copy end --> .card .card-header.pb-0 h5 Small buttons .setting-list ul.list-unstyled.setting-option li .setting-primary i.icon-settings li i.view-html.fa.fa-code.font-primary li i.icofont.icofont-maximize.full-card.font-primary li i.icofont.icofont-minus.minimize-card.font-primary li i.icofont.icofont-refresh.reload-card.font-primary li i.icofont.icofont-error.close-card.font-primary span | Add code .btn-pill | , code .btn-air-* | and code .btn-sm | class for small button .card-body.btn-showcase button.btn.btn-pill.btn-primary.btn-air-primary.btn-sm(type='button' title='btn btn-pill btn-primary btn-air-primary btn-sm') Primary Button button.btn.btn-pill.btn-secondary.btn-air-secondary.btn-sm(type='button' title='btn btn-pill btn-secondary btn-air-secondary btn-sm') Secondary Button button.btn.btn-pill.btn-success.btn-air-success.btn-sm(type='button' title='btn btn-pill btn-success btn-air-success btn-sm') Success Button button.btn.btn-pill.btn-info.btn-air-info.btn-sm(type='button' title='btn btn-pill btn-info btn-air-info btn-sm') Info Button button.btn.btn-pill.btn-warning.btn-air-warning.btn-sm(type='button' title='btn btn-pill btn-warning btn-air-warning btn-sm') Warning Button button.btn.btn-pill.btn-danger.btn-air-danger.btn-sm(type='button' title='btn btn-pill btn-danger btn-air-danger btn-sm') Danger Button button.btn.btn-pill.btn-light.btn-air-light.btn-sm(type='button' title='btn btn-pill btn-light btn-air-light btn-sm') Light Button .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head2', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#example-head2 | <!-- Cod Box Copy begin --> | <button type="button" class="btn btn-pill btn-primary btn-air-primary btn-sm">Primary button</button> | <button type="button" class="btn btn-pill btn-secondary btn-air-secondary btn-sm">Secondary button</button> | <button type="button" class="btn btn-pill btn-success btn-air-success btn-sm">Success button</button> | <button type="button" class="btn btn-pill btn-info btn-air-info btn-sm">Info button</button> | <button type="button" class="btn btn-pill btn-warning btn-air-warning btn-sm">Warning button</button> | <button type="button" class="btn btn-pill btn-danger btn-air-danger btn-sm">Danger button</button> | <button type="button" class="btn btn-pill btn-light btn-air-light btn-sm">Light button</button> | <!-- Cod Box Copy end --> .card .card-header.pb-0 h5 Extra Small buttons .setting-list ul.list-unstyled.setting-option li .setting-primary i.icon-settings li i.view-html.fa.fa-code.font-primary li i.icofont.icofont-maximize.full-card.font-primary li i.icofont.icofont-minus.minimize-card.font-primary li i.icofont.icofont-refresh.reload-card.font-primary li i.icofont.icofont-error.close-card.font-primary span | Add code .btn-pill | , code .btn-air-* | and code .btn-xs | class for extra small button .card-body.btn-showcase button.btn.btn-pill.btn-primary.btn-air-primary.btn-xs(type='button' title='btn btn-pill btn-primary btn-air-primary btn-xs') Primary Button button.btn.btn-pill.btn-secondary.btn-air-secondary.btn-xs(type='button' title='btn btn-pill btn-secondary btn-air-secondary btn-xs') Secondary Button button.btn.btn-pill.btn-success.btn-air-success.btn-xs(type='button' title='btn btn-pill btn-success btn-air-success btn-xs') Success Button button.btn.btn-pill.btn-info.btn-air-info.btn-xs(type='button' title='btn btn-pill btn-info btn-air-info btn-xs') Info Button button.btn.btn-pill.btn-warning.btn-air-warning.btn-xs(type='button' title='btn btn-pill btn-warning btn-air-warning btn-xs') Warning Button button.btn.btn-pill.btn-danger.btn-air-danger.btn-xs(type='button' title='btn btn-pill btn-danger btn-air-danger btn-xs') Danger Button button.btn.btn-pill.btn-light.btn-air-light.btn-xs(type='button' title='btn btn-pill btn-light btn-air-light btn-xs') Light Button .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head3', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#example-head3 | <!-- Cod Box Copy begin --> | <button type="button" class="btn btn-pill btn-primary btn-air-primary btn-xs">Primary button</button> | <button type="button" class="btn btn-pill btn-secondary btn-air-secondary btn-xs">Secondary button</button> | <button type="button" class="btn btn-pill btn-success btn-air-success btn-xs">Success button</button> | <button type="button" class="btn btn-pill btn-info btn-air-info btn-xs">Info button</button> | <button type="button" class="btn btn-pill btn-warning btn-air-warning btn-xs">Warning button</button> | <button type="button" class="btn btn-pill btn-danger btn-air-danger btn-xs">Danger button</button> | <button type="button" class="btn btn-pill btn-light btn-air-light btn-xs">Light button</button> | <!-- Cod Box Copy end --> .card .card-header.pb-0 h5 Active Buttons .setting-list ul.list-unstyled.setting-option li .setting-primary i.icon-settings li i.view-html.fa.fa-code.font-primary li i.icofont.icofont-maximize.full-card.font-primary li i.icofont.icofont-minus.minimize-card.font-primary li i.icofont.icofont-refresh.reload-card.font-primary li i.icofont.icofont-error.close-card.font-primary span | Add code .active | for active state .card-body.btn-showcase button.btn.btn-pill.btn-primary.btn-air-primary.active(type='button' title='btn btn-pill btn-primary btn-air-primary active') Active button.btn.btn-pill.btn-secondary.btn-air-secondary.active(type='button' title='btn btn-pill btn-secondary btn-air-secondary active') Active button.btn.btn-pill.btn-success.btn-air-success.active(type='button' title='btn btn-pill btn-success btn-air-success active') Active button.btn.btn-pill.btn-info.btn-air-info.active(type='button' title='btn btn-pill btn-info btn-air-info active') Active button.btn.btn-pill.btn-warning.btn-air-warning.active(type='button' title='btn btn-pill btn-warning btn-air-warning active') Active button.btn.btn-pill.btn-danger.btn-air-danger.active(type='button' title='btn btn-pill btn-danger btn-air-danger active') Active button.btn.btn-pill.btn-light.btn-air-light.active.txt-dark(type='button' title='btn btn-pill btn-light btn-air-light active') Active .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head4', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#example-head4 | <!-- Cod Box Copy begin --> | <button type="button" class="btn btn-pill btn-primary btn-air-primary active">Active</button> | <button type="button" class="btn btn-pill btn-secondary btn-air-secondary active">Active</button> | <button type="button" class="btn btn-pill btn-success btn-air-success active">Active</button> | <button type="button" class="btn btn-pill btn-info btn-air-info active">Active</button> | <button type="button" class="btn btn-pill btn-warning btn-air-warning active">Active</button> | <button type="button" class="btn btn-pill btn-danger btn-air-danger active">Active</button> | <button type="button" class="btn btn-pill btn-light btn-air-light active txt-dark">Active</button> | <!-- Cod Box Copy end --> .card .card-header.pb-0 h5 Disabled buttons .setting-list ul.list-unstyled.setting-option li .setting-primary i.icon-settings li i.view-html.fa.fa-code.font-primary li i.icofont.icofont-maximize.full-card.font-primary li i.icofont.icofont-minus.minimize-card.font-primary li i.icofont.icofont-refresh.reload-card.font-primary li i.icofont.icofont-error.close-card.font-primary span | Add code .disabled | class or code disabled="disabled" | attribute for disabled button .card-body.btn-showcase button.btn.btn-pill.btn-primary.btn-air-primary.disabled(type='button') Disabled button.btn.btn-pill.btn-secondary.btn-air-secondary.disabled(type='button') Disabled button.btn.btn-pill.btn-success.btn-air-success.disabled(type='button') Disabled button.btn.btn-pill.btn-info.btn-air-info.disabled(type='button') Disabled button.btn.btn-pill.btn-warning.btn-air-warning.disabled(type='button') Disabled button.btn.btn-pill.btn-danger.btn-air-danger.disabled(type='button') Disabled button.btn.btn-pill.btn-light.btn-air-light.disabled(type='button') Disabled .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head5', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#example-head5 | <!-- Cod Box Copy begin --> | <button type="button" class="btn btn-pill btn-primary btn-air-primary disabled">Disabled</button> | <button type="button" class="btn btn-pill btn-secondary btn-air-secondary disabled">Disabled</button> | <button type="button" class="btn btn-pill btn-success btn-air-success disabled">Disabled</button> | <button type="button" class="btn btn-pill btn-info btn-air-info disabled">Disabled</button> | <button type="button" class="btn btn-pill btn-warning btn-air-warning disabled">Disabled</button> | <button type="button" class="btn btn-pill btn-danger btn-air-danger disabled">Disabled</button> | <button type="button" class="btn btn-pill btn-light btn-air-light disabled txt-dark">Disabled</button> | <!-- Cod Box Copy end --> .card .card-header.pb-0 h5 Custom state buttons .setting-list ul.list-unstyled.setting-option li .setting-primary i.icon-settings li i.view-html.fa.fa-code.font-primary li i.icofont.icofont-maximize.full-card.font-primary li i.icofont.icofont-minus.minimize-card.font-primary li i.icofont.icofont-refresh.reload-card.font-primary li i.icofont.icofont-error.close-card.font-primary span | The code .btn | class used with code <button> | , code <a> | and code <input> | elements. .card-body.btn-showcase a.btn.btn-pill.btn-primary.btn-air-primary(href='#', data-toggle='tooltip', title='btn btn-primary', role='button') Link input.btn.btn-pill.btn-secondary.btn-air-secondary.btn-air-secondary(type='button', value='Input', data-toggle='tooltip', title='btn btn-secondary') input.btn.btn-pill.btn-success.btn-air-success.btn-air-success(type='submit', value='Submit', data-toggle='tooltip', title='btn btn-success') button.btn.btn-pill.btn-info.btn-air-info.btn-air-info(type='submit', title='btn btn-info') Button .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head6', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#example-head6 | <!-- Cod Box Copy begin --> | <a class="btn btn-pill btn-primary btn-air-primary" href="#" data-bs-toggle="tooltip;" title="btn btn-primary" role="button">link</button> | <input class="btn btn-pill btn-primary btn-air-primary" type="button" value="Input" data-bs-toggle="tooltip;" title="btn btn-secondary"> | <input class="btn btn-pill btn-success btn-air-success" type="submit" value="Submit" data-bs-toggle="tooltip" title="btn btn-success"> | <button class="btn btn-pill btn-info btn-air-info" type="submit">Button</button> | <!-- Cod Box Copy end --> .card .card-header.pb-0 h5 outline buttons .setting-list ul.list-unstyled.setting-option li .setting-primary i.icon-settings li i.view-html.fa.fa-code.font-primary li i.icofont.icofont-maximize.full-card.font-primary li i.icofont.icofont-minus.minimize-card.font-primary li i.icofont.icofont-refresh.reload-card.font-primary li i.icofont.icofont-error.close-card.font-primary span | Add code .btn-pill | , code .btn-air-* | and code .btn-outline-* | class for button with outline .card-body.btn-showcase button.btn.btn-pill.btn-outline-primary.btn-air-primary(type='button' title='btn btn-pill btn-outline-primary btn-air-primary') Primary Button button.btn.btn-pill.btn-outline-secondary.btn-air-secondary(type='button' title='btn btn-pill btn-outline-secondary btn-air-secondary') Secondary Button button.btn.btn-pill.btn-outline-success.btn-air-success(type='button' title='btn btn-pill btn-outline-success btn-air-success') Success Button button.btn.btn-pill.btn-outline-info.btn-air-info(type='button' title='btn btn-pill btn-outline-info btn-air-info') Info Button button.btn.btn-pill.btn-outline-warning.btn-air-warning(type='button' title='btn btn-pill btn-outline-warning btn-air-warning') Warning Button button.btn.btn-pill.btn-outline-danger.btn-air-danger(type='button' title='btn btn-pill btn-outline-danger btn-air-danger') Danger Button button.btn.btn-pill.btn-outline-light.btn-air-light.txt-dark(type='button' title='btn btn-pill btn-outline-light btn-air-light') Light Button .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head7', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#example-head7 | <!-- Cod Box Copy begin --> | <button type="button" class="btn btn-pill btn-outline-primary btn-air-primary">Primary button</button> | <button type="button" class="btn btn-pill btn-outline-secondary btn-air-secondary">Secondary button</button> | <button type="button" class="btn btn-pill btn-outline-success btn-air-success">Success button</button> | <button type="button" class="btn btn-pill btn-outline-info btn-air-info">Info button</button> | <button type="button" class="btn btn-pill btn-outline-warning btn-air-warning">Warning button</button> | <button type="button" class="btn btn-pill btn-outline-danger btn-air-danger">Danger button</button> | <button type="button" class="btn btn-pill btn-outline-light btn-air-light txt-dark">Light button</button> | <!-- Cod Box Copy end --> .card .card-header.pb-0 h5 bold Border outline buttons .setting-list ul.list-unstyled.setting-option li .setting-primary i.icon-settings li i.view-html.fa.fa-code.font-primary li i.icofont.icofont-maximize.full-card.font-primary li i.icofont.icofont-minus.minimize-card.font-primary li i.icofont.icofont-refresh.reload-card.font-primary li i.icofont.icofont-error.close-card.font-primary span | Add code .btn-pill | , code .btn-air-* | and code .btn-outline-*-2x | class for button with bold outline .card-body.btn-showcase button.btn.btn-pill.btn-outline-primary-2x.btn-air-primary(type='button' title='btn btn-pill btn-outline-primary-2x btn-air-primary') Primary Button button.btn.btn-pill.btn-outline-secondary-2x.btn-air-secondary(type='button' title='btn btn-pill btn-outline-secondary-2x btn-air-secondary') Secondary Button button.btn.btn-pill.btn-outline-success-2x.btn-air-success(type='button' title='btn btn-pill btn-outline-success-2x btn-air-success') Success Button button.btn.btn-pill.btn-outline-info-2x.btn-air-info(type='button' title='btn btn-pill btn-outline-info-2x btn-air-info') Info Button button.btn.btn-pill.btn-outline-warning-2x.btn-air-warning(type='button' title='btn btn-pill btn-outline-warning-2x btn-air-warning') Warning Button button.btn.btn-pill.btn-outline-danger-2x.btn-air-danger(type='button' title='btn btn-pill btn-outline-danger-2x btn-air-danger') Danger Button button.btn.btn-pill.btn-outline-light-2x.btn-air-light.txt-dark(type='button' title='btn btn-pill btn-outline-light-2x btn-air-light') Light Button .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head8', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#example-head8 | <!-- Cod Box Copy begin --> | <button type="button" class="btn btn-pill btn-outline-primary-2x btn-air-primary">Primary button</button> | <button type="button" class="btn btn-pill btn-outline-secondary-2x btn-air-secondary">Secondary button</button> | <button type="button" class="btn btn-pill btn-outline-success-2x btn-air-success">Success button</button> | <button type="button" class="btn btn-pill btn-outline-info-2x btn-air-info">Info button</button> | <button type="button" class="btn btn-pill btn-outline-warning-2x btn-air-warning">Warning button</button> | <button type="button" class="btn btn-pill btn-outline-danger-2x btn-air-danger">Danger button</button> | <button type="button" class="btn btn-pill btn-outline-light-2x btn-air-light txt-dark">Light button</button> | <!-- Cod Box Copy end --> .card .card-header.pb-0 h5 outline Large buttons .setting-list ul.list-unstyled.setting-option li .setting-primary i.icon-settings li i.view-html.fa.fa-code.font-primary li i.icofont.icofont-maximize.full-card.font-primary li i.icofont.icofont-minus.minimize-card.font-primary li i.icofont.icofont-refresh.reload-card.font-primary li i.icofont.icofont-error.close-card.font-primary span code .btn-pill | , code .btn-air-* | , code .btn-outline-* | and code .btn-lg | class for large button with outline .card-body.btn-showcase button.btn.btn-pill.btn-outline-primary.btn-air-primary.btn-lg(type='button' title='btn btn-pill btn-outline-primary btn-air-primary btn-lg') Primary Button button.btn.btn-pill.btn-outline-secondary.btn-air-secondary.btn-lg(type='button' title='btn btn-pill btn-outline-secondary btn-air-secondary btn-lg') Secondary Button button.btn.btn-pill.btn-outline-success.btn-air-success.btn-lg(type='button' title='btn btn-pill btn-outline-success btn-air-success btn-lg') Success Button button.btn.btn-pill.btn-outline-info.btn-air-info.btn-lg(type='button' title='btn btn-pill btn-outline-info btn-air-info btn-lg') Info Button button.btn.btn-pill.btn-outline-warning.btn-air-warning.btn-lg(type='button' title='btn btn-pill btn-outline-warning btn-air-warning btn-lg') Warning Button button.btn.btn-pill.btn-outline-danger.btn-air-danger.btn-lg(type='button' title='btn btn-pill btn-outline-danger btn-air-danger btn-lg') Danger Button button.btn.btn-pill.btn-outline-light.btn-air-light.btn-lg.txt-dark(type='button' title='btn btn-pill btn-outline-light btn-air-light btn-lg') Light Button .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head9', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#example-head9 | <!-- Cod Box Copy begin --> | <button type="button" class="btn btn-pill btn-outline-primary btn-air-primary btn-lg">Primary button</button> | <button type="button" class="btn btn-pill btn-outline-secondary btn-air-secondary btn-lg">Secondary button</button> | <button type="button" class="btn btn-pill btn-outline-success btn-air-success btn-lg">Success button</button> | <button type="button" class="btn btn-pill btn-outline-info btn-air-info btn-lg">Info button</button> | <button type="button" class="btn btn-pill btn-outline-warning btn-air-warning btn-lg">Warning button</button> | <button type="button" class="btn btn-pill btn-outline-danger btn-air-danger btn-lg">Danger button</button> | <button type="button" class="btn btn-pill btn-outline-light btn-air-light btn-lg txt-dark">Light button</button> | <!-- Cod Box Copy end --> .card .card-header.pb-0 h5 outline small buttons .setting-list ul.list-unstyled.setting-option li .setting-primary i.icon-settings li i.view-html.fa.fa-code.font-primary li i.icofont.icofont-maximize.full-card.font-primary li i.icofont.icofont-minus.minimize-card.font-primary li i.icofont.icofont-refresh.reload-card.font-primary li i.icofont.icofont-error.close-card.font-primary span code .btn-pill | , code .btn-air-* | , code .btn-outline-* | and code .btn-sm | class for small button with outline .card-body.btn-showcase button.btn.btn-pill.btn-outline-primary.btn-air-primary.btn-sm(type='button' title='btn btn-pill btn-outline-primary btn-air-primary btn-sm') Primary Button button.btn.btn-pill.btn-outline-secondary.btn-air-secondary.btn-sm(type='button' title='btn btn-pill btn-outline-secondary btn-air-secondary btn-sm') Secondary Button button.btn.btn-pill.btn-outline-success.btn-air-success.btn-sm(type='button' title='btn btn-pill btn-outline-success btn-air-success btn-sm') Success Button button.btn.btn-pill.btn-outline-info.btn-air-info.btn-sm(type='button' title='btn btn-pill btn-outline-info btn-air-info btn-sm') Info Button button.btn.btn-pill.btn-outline-warning.btn-air-warning.btn-sm(type='button' title='btn btn-pill btn-outline-warning btn-air-warning btn-sm') Warning Button button.btn.btn-pill.btn-outline-danger.btn-air-danger.btn-sm(type='button' title='btn btn-pill btn-outline-danger btn-air-danger btn-sm') Danger Button button.btn.btn-pill.btn-outline-light.btn-air-light.btn-sm.txt-dark(type='button' title='btn btn-pill btn-outline-light btn-air-light btn-sm') Light Button .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head10', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#example-head10 | <!-- Cod Box Copy begin --> | <button type="button" class="btn btn-pill btn-outline-primary btn-air-primary btn-sm">Primary button</button> | <button type="button" class="btn btn-pill btn-outline-secondary btn-air-secondary btn-sm">Secondary button</button> | <button type="button" class="btn btn-pill btn-outline-success btn-air-success btn-sm">Success button</button> | <button type="button" class="btn btn-pill btn-outline-info btn-air-info btn-sm">Info button</button> | <button type="button" class="btn btn-pill btn-outline-warning btn-air-warning btn-sm">Warning button</button> | <button type="button" class="btn btn-pill btn-outline-danger btn-air-danger btn-sm">Danger button</button> | <button type="button" class="btn btn-pill btn-outline-light btn-air-light btn-sm txt-dark">Light button</button> | <!-- Cod Box Copy end --> .card .card-header.pb-0 h5 outline extra small buttons .setting-list ul.list-unstyled.setting-option li .setting-primary i.icon-settings li i.view-html.fa.fa-code.font-primary li i.icofont.icofont-maximize.full-card.font-primary li i.icofont.icofont-minus.minimize-card.font-primary li i.icofont.icofont-refresh.reload-card.font-primary li i.icofont.icofont-error.close-card.font-primary span code .btn-pill | , code .btn-air-* | , code .btn-outline-* | and code .btn-xs | class for extra small button with outline .card-body.btn-showcase button.btn.btn-pill.btn-outline-primary.btn-air-primary.btn-xs(type='button' title='btn btn-pill btn-outline-primary btn-air-primary btn-xs') Primary Button button.btn.btn-pill.btn-outline-secondary.btn-air-secondary.btn-xs(type='button' title='btn btn-pill btn-outline-secondary btn-air-secondary btn-xs') Secondary Button button.btn.btn-pill.btn-outline-success.btn-air-success.btn-xs(type='button' title='btn btn-pill btn-outline-success btn-air-success btn-xs') Success Button button.btn.btn-pill.btn-outline-info.btn-air-info.btn-xs(type='button' title='btn btn-pill btn-outline-info btn-air-info btn-xs') Info Button button.btn.btn-pill.btn-outline-warning.btn-air-warning.btn-xs(type='button' title='btn btn-pill btn-outline-warning btn-air-warning btn-xs') Warning Button button.btn.btn-pill.btn-outline-danger.btn-air-danger.btn-xs(type='button' title='btn btn-pill btn-outline-danger btn-air-danger btn-xs') Danger Button button.btn.btn-pill.btn-outline-light.btn-air-light.btn-xs.txt-dark(type='button' title='btn btn-pill btn-outline-light btn-air-light btn-xs') Light Button .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head11', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#example-head11 | <!-- Cod Box Copy begin --> | <button type="button" class="btn btn-pill btn-outline-primary btn-air-primary btn-xs">Primary button</button> | <button type="button" class="btn btn-pill btn-outline-secondary btn-air-secondary btn-xs">Secondary button</button> | <button type="button" class="btn btn-pill btn-outline-success btn-air-success btn-xs">Success button</button> | <button type="button" class="btn btn-pill btn-outline-info btn-air-info btn-xs">Info button</button> | <button type="button" class="btn btn-pill btn-outline-warning btn-air-warning btn-xs">warning button</button> | <button type="button" class="btn btn-pill btn-outline-danger btn-air-danger btn-xs">Danger button</button> | <button type="button" class="btn btn-pill btn-outline-light btn-air-light btn-xs txt-dark">Light button</button> | <!-- Cod Box Copy end --> .card .card-header.pb-0 h5 Disabled outline buttons .setting-list ul.list-unstyled.setting-option li .setting-primary i.icon-settings li i.view-html.fa.fa-code.font-primary li i.icofont.icofont-maximize.full-card.font-primary li i.icofont.icofont-minus.minimize-card.font-primary li i.icofont.icofont-refresh.reload-card.font-primary li i.icofont.icofont-error.close-card.font-primary span | Add code .disabled | class or code disabled="disabled" | attribute for disabled button .card-body.btn-showcase button.btn.btn-pill.btn-outline-primary.btn-air-primary.disabled(type='button') Disabled button.btn.btn-pill.btn-outline-secondary.btn-air-secondary.disabled(type='button') Disabled button.btn.btn-pill.btn-outline-success.btn-air-success.disabled(type='button') Disabled button.btn.btn-pill.btn-outline-info.btn-air-info.disabled(type='button') Disabled button.btn.btn-pill.btn-outline-warning.btn-air-warning.disabled(type='button') Disabled button.btn.btn-pill.btn-outline-danger.btn-air-danger.disabled(type='button') Disabled button.btn.btn-pill.btn-outline-light.btn-air-light.disabled.txt-dark(type='button') Disabled .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head12', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#example-head12 | <!-- Cod Box Copy begin --> | <button type="button" class="btn btn-pill btn-outline-primary btn-air-primary disabled">Disabled</button> | <button type="button" class="btn btn-pill btn-outline-secondary btn-air-secondary disabled">Disabled</button> | <button type="button" class="btn btn-pill btn-outline-success btn-air-success disabled">Disabled</button> | <button type="button" class="btn btn-pill btn-outline-info btn-air-info disabled">Disabled</button> | <button type="button" class="btn btn-pill btn-outline-warning btn-air-warning disabled">Disabled</button> | <button type="button" class="btn btn-pill btn-outline-danger btn-air-danger disabled">Disabled</button> | <button type="button" class="btn btn-pill btn-outline-light btn-air-light disabled txt-dark">Disabled</button> | <!-- Cod Box Copy end --> .card .card-header.pb-0 h5 Gradien buttons .setting-list ul.list-unstyled.setting-option li .setting-primary i.icon-settings li i.view-html.fa.fa-code.font-primary li i.icofont.icofont-maximize.full-card.font-primary li i.icofont.icofont-minus.minimize-card.font-primary li i.icofont.icofont-refresh.reload-card.font-primary li i.icofont.icofont-error.close-card.font-primary span code .btn-pill | , code .btn-air-* | , code .btn-* | and code .btn-*-gradien | class for gradien button .card-body.btn-showcase button.btn.btn-pill.btn-air-primary.btn-primary-gradien(type='button' title='btn btn-pill btn-air-primary btn-primary-gradien') Primary Button button.btn.btn-pill.btn-air-secondary.btn-secondary-gradien(type='button' title='btn btn-pill btn-air-secondary btn-secondary-gradien') Secondary Button button.btn.btn-pill.btn-air-success.btn-success-gradien(type='button' title='btn btn-pill btn-air-success btn-success-gradien') Success Button button.btn.btn-pill.btn-air-info.btn-info-gradien(type='button' title='btn btn-pill btn-air-info btn-info-gradien') Info Button button.btn.btn-pill.btn-air-warning.btn-warning-gradien(type='button' title='btn btn-pill btn-air-warning btn-warning-gradien') Warning Button button.btn.btn-pill.btn-air-danger.btn-danger-gradien(type='button' title='btn btn-pill btn-air-danger btn-danger-gradien') Danger Button button.btn.btn-pill.btn-air-light.btn-light-gradien.txt-dark(type='button' title='btn btn-pill btn-air-light btn-light-gradien') Light Button .code-box-copy button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head13', title='Copy') i.icofont.icofont-copy-alt pre code.language-html#example-head13 | <!-- Cod Box Copy begin --> | <button type="button" class="btn btn-pill btn-primary btn-air-primary btn-primary-gradien">Primary button</button> | <button type="button" class="btn btn-pill btn-secondary btn-air-secondary btn-secondary-gradien">Secondary button</button> | <button type="button" class="btn btn-pill btn-success btn-air-success btn-success-gradien">Success button</button> | <button type="button" class="btn btn-pill btn-info btn-air-info btn-info-gradien">Info button</button> | <button type="button" class="btn btn-pill btn-warning btn-air-warning btn-warning-gradien">warning button</button> | <button type="button" class="btn btn-pill btn-danger btn-air-danger btn-danger-gradien">Danger button</button> | <button type="button" class="btn btn-pill btn-light btn-air-light btn-light-gradien txt-dark">Light button</button> | <!-- Cod Box Copy end --> // Container-fluid Ends include ../../components/footer include ../../components/footer-files