Buttons With Shadow
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Default Buttons With Colors
<button type = "button" class = "btn btn-primary wdpk-button">Primary</button>
<button type = "button" class = "btn btn-secondary wdpk-button">Secondary</button>
<button type = "button" class = "btn btn-success wdpk-button">Success</button>
<button type = "button" class = "btn btn-danger wdpk-button">Danger</button>
<button type = "button" class = "btn btn-warning wdpk-button">Warning</button>
<button type = "button" class = "btn btn-info wdpk-button">Info</button>
<button type = "button" class = "btn btn-light wdpk-button">Light</button>
<button type = "button" class = "btn btn-dark wdpk-button">Dark</button>
$wdpk-btn-shadow: (
shadowOn: true,
hOffset: 0px,
vOffset: 3px,
blurRadius: 6px,
shadowSpread: 0px,
shadowColor: rgba(0, 0, 0, 0.6)
) !default;
/* No Changes Made To Default Javascript */
Outline Buttons
<button type = "button" class = "btn btn-outline-primary wdpk-button">Primary</button>
<button type = "button" class = "btn btn-outline-secondary wdpk-button">Secondary</button>
<button type = "button" class = "btn btn-outline-success wdpk-button">Success</button>
<button type = "button" class = "btn btn-outline-danger wdpk-button">Danger</button>
<button type = "button" class = "btn btn-outline-warning wdpk-button">Warning</button>
<button type = "button" class = "btn btn-outline-info wdpk-button">Info</button>
<button type = "button" class = "btn btn-outline-light wdpk-button">Light</button>
<button type = "button" class = "btn btn-outline-dark wdpk-button">Dark</button>
$wdpk-btn-shadow: (
shadowOn: true,
hOffset: 0px,
vOffset: 3px,
blurRadius: 6px,
shadowSpread: 0px,
shadowColor: rgba(0, 0, 0, 0.6)
) !default;
/* No Changes Made To Default Javascript */
Buttons With Icons
<button type = "button" class = "btn btn-lg btn-primary wdpk-button"><i class = "fas fa fa-cloud-download"></i>
Primary
</button>
<button type = "button" class = "btn btn-lg btn-secondary wdpk-button"><i
class = "fas fa fa-cloud-download"></i>Secondary
</button>
$wdpk-btn-shadow: (
shadowOn: true,
hOffset: 0px,
vOffset: 3px,
blurRadius: 6px,
shadowSpread: 0px,
shadowColor: rgba(0, 0, 0, 0.6)
) !default;
/* No Changes Made To Default Javascript */
Buttons With Gradient Background
<button type = "button" class = "btn btn-lg btn-primary wdpk-button wdpk-button-gradient">
<span class = "wdpk-button-content"><i class = "fas fa fa-cloud-download"></i>Primary</span>
</button>
$wdpk-btn-shadow: (
shadowOn: true,
hOffset: 0px,
vOffset: 3px,
blurRadius: 6px,
shadowSpread: 0px,
shadowColor: rgba(0, 0, 0, 0.6)
) !default;
/* No Changes Made To Default Javascript */
Button Tags
Just like Bootstrap and along with Bootstrap Classes - The .btn classes are designed to be used
with the <button> element. However, you can also use these classes on <a>
or <input> elements (though some browsers may apply a slightly different
rendering). You get to use the basics set in WoodPecker Variables file by addind a single .wdpk-button
class
<a class = "btn wdpk-button btn-primary" href = "#" role = "button">Link</a>
<button class = "btn btn-primary wdpk-button" type = "submit">Button</button>
<input class = "btn btn-primary wdpk-button" type = "button" value = "Input">
<input class = "btn btn-primary wdpk-button" type = "submit" value = "Submit">
<input class = "btn btn-primary wdpk-button" type = "reset" value = "Reset">
<input class = "btn btn-success wdpk-button" type = "submit" value = "Submit">
<input class = "btn btn-danger wdpk-button" type = "reset" value = "Reset">
$wdpk-btn-shadow: (
shadowOn: true,
hOffset: 0px,
vOffset: 3px,
blurRadius: 6px,
shadowSpread: 0px,
shadowColor: rgba(0, 0, 0, 0.6)
) !default;
/* No Changes Made To Default Javascript */
Large Size Buttons
Use the Bootstrap Default Size Classes .btn-lg and the parameters of the large
button
can be changed by updating WoodPeckers SCSS variables. This gives you the flexibility of using
the Bootstrapdefault sizes but also having the ability to override the defaults as well
<button type = "button" class = "btn btn-lg btn-primary wdpk-button">Primary</button>
<button type = "button" class = "btn btn-lg btn-secondary wdpk-button">Secondary</button>
$wdpk-btn-shadow: (
shadowOn: true,
hOffset: 0px,
vOffset: 3px,
blurRadius: 6px,
shadowSpread: 0px,
shadowColor: rgba(0, 0, 0, 0.6)
) !default;
/* No Changes Made To Default Javascript */
Small Size Buttons
Use the Bootstrap Default Size Classes .btn-sm and the parameters of the large
button
can be changed by updating WoodPeckers SCSS variables. This gives you the flexibility of using
the Bootstrapdefault sizes but also having the ability to override the defaults as well
<button type = "button" class = "btn btn-sm btn-primary wdpk-button">Primary</button>
<button type = "button" class = "btn btn-sm btn-secondary wdpk-button">Secondary</button>
$wdpk-btn-shadow: (
shadowOn: true,
hOffset: 0px,
vOffset: 3px,
blurRadius: 6px,
shadowSpread: 0px,
shadowColor: rgba(0, 0, 0, 0.6)
) !default;
/* No Changes Made To Default Javascript */
Block Buttons Along With Sizes
Use the Bootstrap Default Block button classes .btn-block to any size of the button
to make it a block button and the parameters of the large button
can be changed by updating WoodPeckers SCSS variables. This gives you the flexibility of using
the Bootstrapdefault sizes but also having the ability to override the defaults as well
<button type = "button" class = "btn btn-sm btn-block btn-primary wdpk-button">Primary</button>
<button type = "button" class = "btn btn-block btn-primary wdpk-button">Primary</button>
<button type = "button" class = "btn btn-lg btn-block btn-primary wdpk-button">Primary</button>
$wdpk-btn-shadow: (
shadowOn: true,
hOffset: 0px,
vOffset: 3px,
blurRadius: 6px,
shadowSpread: 0px,
shadowColor: rgba(0, 0, 0, 0.6)
) !default;
/* No Changes Made To Default Javascript */
