Mdb Buttons

From Foundation
Jump to navigation Jump to search

Extended Buttons

Material design components are a brand-new feature to Foundation, they're not included in the current version (1.4.23), nor are they included in the toolbar, watch this space for 1.4.24

Basic buttons

Primary
Default
Secondary
Success
Info
Warning
Danger
<div type="button" class="btn btn-primary waves-effect waves-light">Primary</div>
<div type="button" class="btn btn-default waves-effect waves-light">Default</div>
<div type="button" class="btn btn-secondary waves-effect waves-light">Secondary</div>
<div type="button" class="btn btn-success waves-effect waves-light">Success</div>
<div type="button" class="btn btn-info waves-effect waves-light">Info</div>
<div type="button" class="btn btn-warning waves-effect waves-light">Warning</div>
<div type="button" class="btn btn-danger waves-effect waves-light">Danger</div>

Additional buttons

Elegant
Unique
Pink
Purple
Deep-purple
Indigo
Light blue
Cyan
Dark-green
Light-green
Yellow
Amber
Deep-orange
Brown
Grey
<div type="button" class="btn btn-elegant waves-effect waves-light">Elegant</div>
<div type="button" class="btn btn-unique waves-effect waves-light">Unique</div>
<div type="button" class="btn btn-pink waves-effect waves-light">Pink</div>
<div type="button" class="btn btn-purple waves-effect waves-light">Purple</div>
<div type="button" class="btn btn-deep-purple waves-effect waves-light">Deep-purple</div>
<div type="button" class="btn btn-indigo waves-effect waves-light">Indigo</div>
<div type="button" class="btn btn-light-blue waves-effect waves-light">Light blue</div>
<div type="button" class="btn btn-cyan waves-effect waves-light">Cyan</div>
<div type="button" class="btn btn-dark-green waves-effect waves-light">Dark-green</div>
<div type="button" class="btn btn-light-green waves-effect waves-light">Light-green</div>
<div type="button" class="btn btn-yellow waves-effect waves-light">Yellow</div>
<div type="button" class="btn btn-amber waves-effect waves-light">Amber</div>
<div type="button" class="btn btn-deep-orange waves-effect waves-light">Deep-orange</div>
<div type="button" class="btn btn-brown waves-effect waves-light">Brown</div>
<div type="button" class="btn btn-blue-grey waves-effect waves-light">Grey</div>

Gradient buttons

Peach
Purple
Blue
Aqua
<div class="btn peach-gradient btn-rounded waves-effect waves-light">Peach</div>
<div class="btn purple-gradient btn-rounded waves-effect waves-light">Purple</div>
<div class="btn blue-gradient btn-rounded waves-effect waves-light">Blue</div>
<div class="btn aqua-gradient btn-rounded waves-effect waves-light">Aqua</div>

Outline buttons

Primary
Default
Secondary
Success
Info
Warning
Danger
<div type="button" class="btn btn-outline-primary waves-effect">Primary</div>
<div type="button" class="btn btn-outline-default waves-effect">Default</div>
<div type="button" class="btn btn-outline-secondary waves-effect">Secondary</div>
<div type="button" class="btn btn-outline-success waves-effect">Success</div>
<div type="button" class="btn btn-outline-info waves-effect">Info</div>
<div type="button" class="btn btn-outline-warning waves-effect">Warning</div>
<div type="button" class="btn btn-outline-danger waves-effect">Danger</div>

Rounded buttons

Primary
Default
Secondary
Success
Info
Warning
Danger
<div type="button" class="btn btn-primary btn-rounded waves-effect waves-light">Primary</div>
<div type="button" class="btn btn-default btn-rounded waves-effect waves-light">Default</div>
<div type="button" class="btn btn-secondary btn-rounded waves-effect waves-light">Secondary</div>
<div type="button" class="btn btn-success btn-rounded waves-effect waves-light">Success</div>
<div type="button" class="btn btn-info btn-rounded waves-effect waves-light">Info</div>
<div type="button" class="btn btn-warning btn-rounded waves-effect waves-light">Warning</div>
<div type="button" class="btn btn-danger btn-rounded waves-effect waves-light">Danger</div>

Rounded outline buttons

Primary
Default
Secondary
Success
Info
Warning
Danger
<div type="button" class="btn btn-outline-primary btn-rounded waves-effect">Primary</div>
<div type="button" class="btn btn-outline-default btn-rounded waves-effect">Default</div>
<div type="button" class="btn btn-outline-secondary btn-rounded waves-effect">Secondary</div>
<div type="button" class="btn btn-outline-success btn-rounded waves-effect">Success</div>
<div type="button" class="btn btn-outline-info btn-rounded waves-effect">Info</div>
<div type="button" class="btn btn-outline-warning btn-rounded waves-effect">Warning</div>
<div type="button" class="btn btn-outline-danger btn-rounded waves-effect">Danger</div>

Button sizes

Large button
Large button
Small button
Small button
<div type="button" class="btn peach-gradient btn-lg waves-effect waves-light">Large button</div>
<div type="button" class="btn purple-gradient btn-lg waves-effect waves-light">Large button</div>
<div type="button" class="btn peach-gradient btn-sm waves-effect waves-light">Small button</div>
<div type="button" class="btn purple-gradient btn-sm waves-effect waves-light">Small button</div>

Social Buttons

Facebook
Twitter
Google +
Linkedin
Instagram
Pinterest
Youtube
Vkontakte
Stack Overflow
Slack
Github
Comments
Email
Dribbble

Facebook
Twitter
Google +
Linkedin
Instagram
Pinterest
Youtube
Vkontakte
Stack Overflow
Slack
Github
Comments
Email
Dribbble

Simple social buttons

<div type="button" class="btn btn-fb waves-effect waves-light"><i class="fab fa-facebook-f"></i></div>
<div type="button" class="btn btn-tw waves-effect waves-light"><i class="fab fa-twitter"></i></div>
<div type="button" class="btn btn-gplus waves-effect waves-light"><i class="fab fa-google-plus-g"></i></div>
<div type="button" class="btn btn-li waves-effect waves-light"><i class="fab fa-linkedin-in"></i></div>
<div type="button" class="btn btn-ins waves-effect waves-light"><i class="fab fa-instagram"></i></div>
<div type="button" class="btn btn-pin waves-effect waves-light"><i class="fab fa-pinterest"></i></div>
<div type="button" class="btn btn-yt waves-effect waves-light"><i class="fab fa-youtube"></i></div>
<div type="button" class="btn btn-dribbble waves-effect waves-light"><i class="fab fa-dribbble left"></i></div>
<div type="button" class="btn btn-vk waves-effect waves-light"><i class="fab fa-vk"></i></div>
<div type="button" class="btn btn-so waves-effect waves-light"><i class="fab fa-stack-overflow"></i></div>
<div type="button" class="btn btn-slack waves-effect waves-light"><i class="fab fa-slack-hash"></i></div>
<div type="button" class="btn btn-git waves-effect waves-light"><i class="fab fa-github"></i></div>
<div type="button" class="btn btn-comm waves-effect waves-light"><i class="fas fa-comments"></i></div>
<div type="button" class="btn btn-email waves-effect waves-light"><i class="fas fa-envelope"></i></div>

Support

Please use the discussion page to ask questions.



TOP

Retrieved from ‘https://foundationextension.com/index.php?title=Mdb_Buttons&oldid=459