Buttons Pill Shaped

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-input-btn-radius: 3rem;

                        
/* 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-input-btn-radius: 3rem;

                        
/* 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-input-btn-radius: 3rem;

                        
/* 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-input-btn-radius: 3rem;

                        
/* 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

Link

                                
<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-input-btn-radius: 3rem;

                        
/* 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-input-btn-radius: 3rem;

                        
/* 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-input-btn-radius: 3rem;

                        
/* 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-input-btn-radius: 3rem;

                        
/* No Changes Made To Default Javascript */

Buttons Pill Shaped

Shortcodes