felipe.aquino/cae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

definicao de layout

Browse Source
This commit is contained in:
Felipe AQUINO
2026-02-06 14:37:54 +00:00
parent 872a5bb3ea
commit a4f80c85c2
2686 changed files with 640668 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

683
public/assets/pug/pages/template/buttons-flat.pug Normal file
View File

@@ -0,0 +1,683 @@
- var prism = true;
- var theme_customizer = true;
- var tooltip = true;
- var clipboard = true;
- var customcard = 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
| Flat Buttons
ol.breadcrumb
li.breadcrumb-item
a(href='index.html')
| Home
li.breadcrumb-item Buttons
li.breadcrumb-item.active Flat 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-square
| class for flat button
.card-body.btn-showcase
button.btn.btn-square.btn-primary(type='button') Primary Button
button.btn.btn-square.btn-secondary(type='button') Secondary Button
button.btn.btn-square.btn-success(type='button') Success Button
button.btn.btn-square.btn-info(type='button') Info Button
button.btn.btn-square.btn-warning(type='button') Warning Button
button.btn.btn-square.btn-danger(type='button') Danger Button
button.btn.btn-square.btn-light(type='button') 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-square btn-primary">primary button</button>
| <button type="button" class="btn btn-square btn-secondary">secondary button</button>
| <button type="button" class="btn btn-square btn-success">Success Button</button>
| <button type="button" class="btn btn-square btn-info">Info button</button>
| <button type="button" class="btn btn-square btn-warning">warning button</button>
| <button type="button" class="btn btn-square btn-danger">danger button</button>
| <button type="button" class="btn btn-square btn-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-square
| and
code .btn-lg
| class for large button
.card-body.btn-showcase
button.btn.btn-square.btn-primary.btn-lg(type='button') Primary Button
button.btn.btn-square.btn-secondary.btn-lg(type='button') Secondary Button
button.btn.btn-square.btn-success.btn-lg(type='button') Success Button
button.btn.btn-square.btn-info.btn-lg(type='button') Info Button
button.btn.btn-square.btn-warning.btn-lg(type='button') Warning Button
button.btn.btn-square.btn-danger.btn-lg(type='button') Danger Button
button.btn.btn-square.btn-light.btn-lg(type='button') 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-square btn-primary btn-lg">primary button</button>
| <button type="button" class="btn btn-square btn-secondary btn-lg">secondary button</button>
| <button type="button" class="btn btn-square btn-success btn-lg">Success Button</button>
| <button type="button" class="btn btn-square btn-info btn-lg">Info button</button>
| <button type="button" class="btn btn-square btn-warning btn-lg">warning button</button>
| <button type="button" class="btn btn-square btn-danger btn-lg">danger button</button>
| <button type="button" class="btn btn-square btn-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-square
| and
code .btn-sm
| class for small button
.card-body.btn-showcase
button.btn.btn-square.btn-primary.btn-sm(type='button') Primary Button
button.btn.btn-square.btn-secondary.btn-sm(type='button') Secondary Button
button.btn.btn-square.btn-success.btn-sm(type='button') Success Button
button.btn.btn-square.btn-info.btn-sm(type='button') Info Button
button.btn.btn-square.btn-warning.btn-sm(type='button') Warning Button
button.btn.btn-square.btn-danger.btn-sm(type='button') Danger Button
button.btn.btn-square.btn-light.btn-sm(type='button') 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-square btn-primary btn-sm">primary button</button>
| <button type="button" class="btn btn-square btn-secondary btn-sm">secondary button</button>
| <button type="button" class="btn btn-square btn-success btn-sm">Success Button</button>
| <button type="button" class="btn btn-square btn-info btn-sm">Info button</button>
| <button type="button" class="btn btn-square btn-warning btn-sm">warning button</button>
| <button type="button" class="btn btn-square btn-danger btn-sm">danger button</button>
| <button type="button" class="btn btn-square btn-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-square
| and
code .btn-xs
| class for extra small button
.card-body.btn-showcase
button.btn.btn-square.btn-primary.btn-xs(type='button') Primary Button
button.btn.btn-square.btn-secondary.btn-xs(type='button') Secondary Button
button.btn.btn-square.btn-success.btn-xs(type='button') Success Button
button.btn.btn-square.btn-info.btn-xs(type='button') Info Button
button.btn.btn-square.btn-warning.btn-xs(type='button') Warning Button
button.btn.btn-square.btn-danger.btn-xs(type='button') Danger Button
button.btn.btn-square.btn-light.btn-xs(type='button') 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-square btn-primary btn-xs">primary button</button>
| <button type="button" class="btn btn-square btn-secondary btn-xs">secondary button</button>
| <button type="button" class="btn btn-square btn-success btn-xs">Success Button</button>
| <button type="button" class="btn btn-square btn-info btn-xs">Info button</button>
| <button type="button" class="btn btn-square btn-warning btn-xs">warning button</button>
| <button type="button" class="btn btn-square btn-danger btn-xs">danger button</button>
| <button type="button" class="btn btn-square btn-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-square.btn-primary.active(type='button') Active
button.btn.btn-square.btn-secondary.active(type='button') Active
button.btn.btn-square.btn-success.active(type='button') Active
button.btn.btn-square.btn-info.active(type='button') Active
button.btn.btn-square.btn-warning.active(type='button') Active
button.btn.btn-square.btn-danger.active(type='button') Active
button.btn.btn-square.btn-light.active.txt-dark(type='button') 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-square btn-primary active">Active</button>
| <button type="button" class="btn btn-square btn-secondary active">Active</button>
| <button type="button" class="btn btn-square btn-success active">Active</button>
| <button type="button" class="btn btn-square btn-info active">Active</button>
| <button type="button" class="btn btn-square btn-warning active">Active</button>
| <button type="button" class="btn btn-square btn-danger active">Active</button>
| <button type="button" class="btn btn-square btn-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-square.btn-primary.disabled(type='button') Disabled
button.btn.btn-square.btn-secondary.disabled(type='button') Disabled
button.btn.btn-square.btn-success.disabled(type='button') Disabled
button.btn.btn-square.btn-info.disabled(type='button') Disabled
button.btn.btn-square.btn-warning.disabled(type='button') Disabled
button.btn.btn-square.btn-danger.disabled(type='button') Disabled
button.btn.btn-square.btn-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-square btn-primary disabled">Disabled</button>
| <button type="button" class="btn btn-square btn-secondary disabled">Disabled</button>
| <button type="button" class="btn btn-square btn-success disabled">Disabled</button>
| <button type="button" class="btn btn-square btn-info disabled">Disabled</button>
| <button type="button" class="btn btn-square btn-warning disabled">Disabled</button>
| <button type="button" class="btn btn-square btn-danger disabled">Disabled</button>
| <button type="button" class="btn btn-square btn-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-square.btn-primary(href='javascript:void(0)', data-bs-toggle='tooltip', title='btn btn-primary', role='button') Link
input.btn.btn-square.btn-secondary(type='button', value='Input', data-bs-toggle='tooltip', title='btn btn-secondary')
input.btn.btn-square.btn-success(type='submit', value='Submit', data-bs-toggle='tooltip', title='btn btn-success')
button.btn.btn-square.btn-info(type='submit') 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-square btn-primary" href="#" data-bs-toggle="tooltip;" title="btn btn-primary" role="button">link</button>
| <input class="btn btn-square btn-primary" type="button" value="Input" data-bs-toggle="tooltip;" title="btn btn-secondary">
| <input class="btn btn-square btn-success" type="submit" value="Submit" data-bs-toggle="tooltip" title="btn btn-success">
| <button class="btn btn-square btn-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-square
| and
code .btn-outline-*
| class for button with outline
.card-body.btn-showcase
button.btn.btn-square.btn-outline-primary(type='button') Primary Button
button.btn.btn-square.btn-outline-secondary(type='button') Secondary Button
button.btn.btn-square.btn-outline-success(type='button') Success Button
button.btn.btn-square.btn-outline-info(type='button') Info Button
button.btn.btn-square.btn-outline-warning(type='button') Warning Button
button.btn.btn-square.btn-outline-danger(type='button') Danger Button
button.btn.btn-square.btn-outline-light.txt-dark(type='button') 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-square btn-outline-primary">primary button</button>
| <button type="button" class="btn btn-square btn-outline-secondary">secondary button</button>
| <button type="button" class="btn btn-square btn-outline-success">Success Button</button>
| <button type="button" class="btn btn-square btn-outline-info">Info button</button>
| <button type="button" class="btn btn-square btn-outline-warning">warning button</button>
| <button type="button" class="btn btn-square btn-outline-danger">danger button</button>
| <button type="button" class="btn btn-square btn-outline-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-square
| and
code .btn-outline-*-2x
| class for button with bold outline
.card-body.btn-showcase
button.btn.btn-square.btn-outline-primary-2x(type='button') Primary Button
button.btn.btn-square.btn-outline-secondary-2x(type='button') Secondary Button
button.btn.btn-square.btn-outline-success-2x(type='button') Success Button
button.btn.btn-square.btn-outline-info-2x(type='button') Info Button
button.btn.btn-square.btn-outline-warning-2x(type='button') Warning Button
button.btn.btn-square.btn-outline-danger-2x(type='button') Danger Button
button.btn.btn-square.btn-outline-light-2x.txt-dark(type='button') 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-square btn-outline-primary-2x">primary button</button>
| <button type="button" class="btn btn-square btn-outline-secondary-2x">secondary button</button>
| <button type="button" class="btn btn-square btn-outline-success-2x">Success Button</button>
| <button type="button" class="btn btn-square btn-outline-info-2x">Info button</button>
| <button type="button" class="btn btn-square btn-outline-warning-2x">warning button</button>
| <button type="button" class="btn btn-square btn-outline-danger-2x">danger button</button>
| <button type="button" class="btn btn-square btn-outline-light-2x 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
| Add
code .btn-square
| ,
code .btn-outline-*
| and
code .btn-lg
| class for large button
.card-body.btn-showcase
button.btn.btn-square.btn-outline-primary.btn-lg(type='button') Primary Button
button.btn.btn-square.btn-outline-secondary.btn-lg(type='button') Secondary Button
button.btn.btn-square.btn-outline-success.btn-lg(type='button') Success Button
button.btn.btn-square.btn-outline-info.btn-lg(type='button') Info Button
button.btn.btn-square.btn-outline-warning.btn-lg(type='button') Warning Button
button.btn.btn-square.btn-outline-danger.btn-lg(type='button') Danger Button
button.btn.btn-square.btn-outline-light.btn-lg.txt-dark(type='button') 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-square btn-outline-primary btn-lg">primary button</button>
| <button type="button" class="btn btn-square btn-outline-secondary btn-lg">secondary button</button>
| <button type="button" class="btn btn-square btn-outline-success btn-lg">Success Button</button>
| <button type="button" class="btn btn-square btn-outline-info btn-lg">Info button</button>
| <button type="button" class="btn btn-square btn-outline-warning btn-lg">warning button</button>
| <button type="button" class="btn btn-square btn-outline-danger btn-lg">danger button</button>
| <button type="button" class="btn btn-square btn-outline-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
| Add
code .btn-square
| ,
code .btn-outline-*
| and
code .btn-sm
| class for small button
.card-body.btn-showcase
button.btn.btn-square.btn-outline-primary.btn-sm(type='button') Primary Button
button.btn.btn-square.btn-outline-secondary.btn-sm(type='button') Secondary Button
button.btn.btn-square.btn-outline-success.btn-sm(type='button') Success Button
button.btn.btn-square.btn-outline-info.btn-sm(type='button') Info Button
button.btn.btn-square.btn-outline-warning.btn-sm(type='button') Warning Button
button.btn.btn-square.btn-outline-danger.btn-sm(type='button') Danger Button
button.btn.btn-square.btn-outline-light.btn-sm.txt-dark(type='button') 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-square btn-outline-primary btn-sm">primary button</button>
| <button type="button" class="btn btn-square btn-outline-secondary btn-sm">secondary button</button>
| <button type="button" class="btn btn-square btn-outline-success btn-sm">Success Button</button>
| <button type="button" class="btn btn-square btn-outline-info btn-sm">Info button</button>
| <button type="button" class="btn btn-square btn-outline-warning btn-sm">warning button</button>
| <button type="button" class="btn btn-square btn-outline-danger btn-sm">danger button</button>
| <button type="button" class="btn btn-square btn-outline-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
| Add
code .btn-square
| ,
code .btn-outline-*
| and
code .btn-xs
| class for extra small button
.card-body.btn-showcase
button.btn.btn-square.btn-outline-primary.btn-xs(type='button') Primary Button
button.btn.btn-square.btn-outline-secondary.btn-xs(type='button') Secondary Button
button.btn.btn-square.btn-outline-success.btn-xs(type='button') Success Button
button.btn.btn-square.btn-outline-info.btn-xs(type='button') Info Button
button.btn.btn-square.btn-outline-warning.btn-xs(type='button') Warning Button
button.btn.btn-square.btn-outline-danger.btn-xs(type='button') Danger Button
button.btn.btn-square.btn-outline-light.btn-xs.txt-dark(type='button') 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-square btn-outline-primary btn-xs">primary button</button>
| <button type="button" class="btn btn-square btn-outline-secondary btn-xs">secondary button</button>
| <button type="button" class="btn btn-square btn-outline-success btn-xs">Success Button</button>
| <button type="button" class="btn btn-square btn-outline-info btn-xs">Info button</button>
| <button type="button" class="btn btn-square btn-outline-warning btn-xs">warning button</button>
| <button type="button" class="btn btn-square btn-outline-danger btn-xs">danger button</button>
| <button type="button" class="btn btn-square btn-outline-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-square.btn-outline-primary.disabled(type='button') Disabled
button.btn.btn-square.btn-outline-secondary.disabled(type='button') Disabled
button.btn.btn-square.btn-outline-success.disabled(type='button') Disabled
button.btn.btn-square.btn-outline-info.disabled(type='button') Disabled
button.btn.btn-square.btn-outline-warning.disabled(type='button') Disabled
button.btn.btn-square.btn-outline-danger.disabled(type='button') Disabled
button.btn.btn-square.btn-outline-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-square btn-outline-primary disabled">Disabled</button>
| <button type="button" class="btn btn-square btn-outline-secondary disabled">Disabled</button>
| <button type="button" class="btn btn-square btn-outline-success disabled">Disabled</button>
| <button type="button" class="btn btn-square btn-outline-info disabled">Disabled</button>
| <button type="button" class="btn btn-square btn-outline-warning disabled">Disabled</button>
| <button type="button" class="btn btn-square btn-outline-danger disabled">Disabled</button>
| <button type="button" class="btn btn-square btn-outline-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
| Add
code .btn-square
| and
code .btn-*-gradien
| class for gradien button
.card-body.btn-showcase
button.btn.btn-square.btn-primary-gradien(type='button') Primary Button
button.btn.btn-square.btn-secondary-gradien(type='button') Secondary Button
button.btn.btn-square.btn-success-gradien(type='button') Success Button
button.btn.btn-square.btn-info-gradien(type='button') Info Button
button.btn.btn-square.btn-warning-gradien(type='button') Warning Button
button.btn.btn-square.btn-danger-gradien(type='button') Danger Button
button.btn.btn-square.btn-light-gradien.txt-dark(type='button') 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-square btn-primary-gradien">primary button</button>
| <button type="button" class="btn btn-square btn-secondary-gradien">secondary button</button>
| <button type="button" class="btn btn-square btn-success-gradien">Success Button</button>
| <button type="button" class="btn btn-square btn-info-gradien">Info button</button>
| <button type="button" class="btn btn-square btn-warning-gradien">warning button</button>
| <button type="button" class="btn btn-square btn-danger-gradien">danger button</button>
| <button type="button" class="btn btn-square btn-light-gradien">light button</button>
| <!-- Cod Box Copy end -->
// Container-fluid Ends
include ../../components/footer
include ../../components/footer-files