Josephin Doe

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

Share your thoughts

#### Button

##### Raised Button

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

##### Code Explanation for Raised Button

                        /* for Default Button */

                        /* for Primary Button */

                        /* for Success Button */

                        /* for Warning Button */

                        /* for Danger Button */

                        /* for Info Button */

                        /* for Disable Button */

##### Flat Button

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

##### Code Explanation for Flat Button

                        /* for Flat Default Button */

                        /* for Flat Primary Button */

                        /* for Flat Success Button */

                        /* for Flat Warning Button */

                        /* for Flat Danger Button */

                        /* for Flat Info Button */

                        /* for Flat Disable Button */

##### Inverse Button

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

##### Code Explanation for Inverse Button

                            /* for Inverse Default Button */

                            /* for Inverse Primary Button */

                            /* for Inverse Success Button */

                            /* for Inverse Warning Button */

                            /* for Inverse Danger Button */

                            /* for Inverse Info Button */

                            /* for Inverse Disable Button */

##### Link Button

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

##### Code Explanation for Link Button

                            /* for link Default Button */

                            Default

                            /* for link Primary Button */

                            Primary

                            /* for link Success Button */

                            Success

                            /* for link Warning Button */

                            Warning

                            /* for link Danger Button */

                            Danger

                            /* for link Info Button */

                            Info

Default Primary success warning danger info

##### Badges On Button

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

##### Code Explanation for Badges on Button

                            /* Badges For General Button */

                            /* Badges For Primary Button */

                            /* Badges For Success Button */

                            /* Badges For Warning Button */

                            /* Badges For Danger Button */

                            /* Badges For Info Button */

                            /* Badges For Disable Button */

##### Size

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

##### Code Explanation For Button Size

                            /* For Extra Large Button */

                            /* For Large Button */

                            /* For Medium Button */

                            /* For Small Button */

                            /* For Extra Small Button */

##### Button Normal States

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

##### Code Explanation For Normal State Button

                            /* For Normal Primary Button States */

                            /* For Normal Success Button States */

                            /* For Normal Warning Button States */

                            /* For Normal Danger Button States */

                            /* For Normal Info Button States */

##### Button Active States

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

##### Code Explanation Active State Button

                            /* For Active Primary Button States */

                            /* For Active Success Button States */

                            /* For Active Warning Button States */

                            /* For Active Danger Button States */

                            /* For Active Info Button States */

##### Button Disable States

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

##### Code Explanation Disabledm State Button

                            /* For Disabled Primary Button States */

                            /* For Disabled Success Button States */

                            /* For Disabled Warning Button States */

                            /* For Disabled Danger Button States */

                            /* For Disabled Info Button States */

##### Group Button

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

##### Code Explanation for Group Button

                            /* For Extra Large Group Button */

                            <div class="btn-group" role="group">

                            </div>

                            /* For Large Group Button */

                            <div class="btn-group" role="group">

                            </div>

                            /* For Medium Group Button*/

                            <div class="btn-group" role="group">

                            </div>

                            /* For Small Group Button*/

                            <div class="btn-group" role="group">

                            </div>

                            /* For Extra Small Group Button*/

                            <div class="btn-group" role="group">

                            </div>

##### Dropdown Button

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

##### Code Explanation for Dropdown Button

                    /* for Primary Dropdown Button */

                    <div class="dropdown-primary dropdown">
                      <button class="btn btn-primary dropdown-toggle waves-effect waves-light" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">primary
                      </button>
                      <div class="dropdown-menu" aria-labelledby="dropdown1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
                        <a class="dropdown-item waves-light waves-effect" href="#">Action</a>
                        <a class="dropdown-item waves-light waves-effect" href="#">Another action</a>
                        <a class="dropdown-item waves-light waves-effect" href="#">Something else here</a>
                      </div>
                    </div>

                    /* For Danger Dropup Button */

                    <div class="dropdown-danger dropup">
                      <button class="btn btn-danger dropdown-toggle waves-effect waves-light" type="button" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger
                      </button>
                      <div class="dropdown-menu" aria-labelledby="dropdown2" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
                        <a class="dropdown-item waves-light waves-effect" href="#">Action</a>
                        <a class="dropdown-item waves-light waves-effect" href="#">Another action</a>
                        <a class="dropdown-item waves-light waves-effect" href="#">Something else her<</a>
                      </div>
                    </div>

                    /* For Success Dropdown Button with divider */

                    <div class="dropdown-success">
                      <button class="btn btn-success dropdown-toggle waves-effect waves-light " type="button" id="dropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><Success</button><
                      <div class="dropdown-menu" aria-labelledby="dropdown3" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
                        <a class="dropdown-item waves-light waves-effect" href="#">Action</a>
                        <a class="dropdown-item waves-light waves-effect" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item waves-light waves-effect" href="#">Something else here</a>
                      </div>
                    </div>

                    /* For Warning Dropdown Button with Header */

                    <div class="dropdown-warning">
                      <button class="btn btn-warning dropdown-toggle waves-effect waves-light" type="button" id="dropdown4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
                      <div class="dropdown-menu" aria-labelledby="dropdown4" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
                        <h6 class="dropdown-header">Dropdown header</h6>
                        <a class="dropdown-item waves-light waves-effect" href="#">Action</a>
                        <a class="dropdown-item waves-light waves-effect" href="#">Another action</a>
                        <a class="dropdown-item waves-light waves-effect" href="#">Something else here</a>
                      </div>
                    </div>

                    /* for Info Dropdown with right align */

                    <div class="btn-group">

                      <div class="dropdown-menu dropdown-menu-right">
                        <button class="dropdown-item" type="button">Action</button>
                        <button class="dropdown-item" type="button">Another action</button>
                        <button class="dropdown-item" type="button">Something else here</button>
                      </div>
                    </div>

##### Split Dropdown

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.

##### Code Explanation for Split Dropdown Button

                            /* for Primary Split Dropdown Button */

                            <div class="btn-group dropdown-split-primary">
                              <button type="button" class="btn btn-primary">primary</button>
                              <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split waves-effect waves-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle primary</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item waves-effect waves-light" href="#">Action</a>
                                <a class="dropdown-item waves-effect waves-light" href="#">Another action</a>
                                <a class="dropdown-item waves-effect waves-light" href="#">Something else here</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item waves-effect waves-light" href="#">Separated link</a>
                              </div>
                            </div>

                            /* For Success Split Dropdown Button */

                            <div class="btn-group dropdown-split-success">
                              <button type="button" class="btn btn-success">success</button>
                              <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split waves-effect waves-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle success</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item waves-effect waves-light" href="#">Action</a>
                                <a class="dropdown-item waves-effect waves-light" href="#">Another action</a>
                                <a class="dropdown-item waves-effect waves-light" href="#">Something else here</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item waves-effect waves-light" href="#">Separated link</a>
                              </div>
                            </div>

                            /* For Danger Split Dropdown Button */

                            <div class="btn-group dropdown-split-danger">
                              <button type="button" class="btn btn-danger">Danger</button>
                              <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split waves-effect waves-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle danger</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item waves-effect waves-light" href="#">Action</a>
                                <a class="dropdown-item waves-effect waves-light" href="#">Another action</a>
                                <a class="dropdown-item waves-effect waves-light" href="#">Something else here</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item waves-effect waves-light" href="#">Separated link</a>
                              </div>
                            </div>

                            /* For Warning Split Dropdown Button */

                            <div class="btn-group dropdown-split-warning">
                              <button type="button" class="btn btn-warning">warning</button>
                              <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split waves-effect waves-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Warning</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item waves-effect waves-light" href="#">Action</a>
                                <a class="dropdown-item waves-effect waves-light" href="#">Another action</a>
                                <a class="dropdown-item waves-effect waves-light" href="#">Something else here</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item waves-effect waves-light" href="#">Separated link</a>
                              </div>
                            </div>

                            /* for Info Split Dropdown Button */

                            <div class="btn-group dropdown-split-info">
                              <button type="button" class="btn btn-info">info</button>
                              <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split waves-effect waves-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle info</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item waves-effect waves-light" href="#">Action</a>
                                <a class="dropdown-item waves-effect waves-light" href="#">Another action</a>
                                <a class="dropdown-item waves-effect waves-light" href="#">Something else here</a>
                                <div class="dropdown-divider"></div>
                               <a class="dropdown-item waves-effect waves-light" href="#">Separated link</a>
                              </div>
                            </div>

##### Block Button

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.

##### Code Explanation for Block Button

                            /* Block Button For Primary Button */

                            <button type="button" class="btn btn-primary btn-block waves-effect">Primary</button>
                            /* Block Button For Success Button */

                            <button type="button" class="btn btn-success btn-block waves-effect">Success</button>

##### With Icon

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

##### Code Explanation for Icon Button

                            /* for Home Icon Button */

                            <button type="button" class="btn btn-primary waves-effect waves-light">
                              <i class="icofont icofont-home"></i>
                                <span class="m-l-10">Home</span>
                            </button>

                            /* for search Icon Button */

                            <button type="button" class="btn btn-primary waves-effect waves-light">
                              <i class="icofont icofont-search-alt-2"></i>
                                <span class="m-l-10">search</span>
                            </button>

                            /* for forward Icon Button */

                           <button type="button" class="btn btn-primary waves-effect waves-light">
                              <i class="icofont icofont-bubble-right"></i>
                                <span class="m-l-10">forward</span>
                            </button>

                            /* for backward Icon Button */

                            <button type="button" class="btn btn-primary waves-effect waves-light">
                              <i class="icofont icofont-bubble-left"></i>
                                <span class="m-l-10">backward</span>
                            </button>

                            /* for sync Icon Button */

                            <button type="button" class="btn btn-primary waves-effect waves-light">
                              <i class="icofont icofont-refresh"></i>
                                <span class="m-l-10">sync</span>
                            </button>

                            /* for menu Icon Button */

                            <button type="button" class="btn btn-primary waves-effect waves-light">
                              <i class="icofont icofont-navigation-menu"></i>
                                <span class="m-l-10">menu</span>
                            </button>

                            /* for phone Icon Button */

                            <button type="button" class="btn btn-primary waves-effect waves-light">
                              <i class="icofont icofont-mobile-phone"></i>
                                <span class="m-l-10">phone</span>
                            </button>

                            /* for code Icon Button */

                            <button type="button" class="btn btn-primary waves-effectwaves-light">
                              <i class="icofont icofont-code-alt"></i>
                                <span class="m-l-10">code</span>
                            </button>

                            /* for Server Icon Button */

                            <button type="button" class="btn btn-primary waves-effect waves-light">
                              <i class="icofont icofont-server"></i>
                               <span class="m-l-10">storage</span>
                            </button>

##### Only Icon

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.

##### Code Explanation for Only Icon Button

                            /* for Home Icon Button */

                            <button type="button" class="btn btn-primary waves-effect waves-light">
                              <i class="icofont icofont-home"></i>
                            </button>

                            /* for search Icon Button */

                            <button type="button" class="btn btn-success waves-effect waves-light">
                              <i class="icofont icofont-search-alt-2"></i>
                            </button>

                            /* for forward Icon Button */

                            <button type="button" class="btn btn-danger waves-effect waves-light">
                              <i class="icofont icofont-bubble-right"></i>
                            </button>

                            /* for backward Icon Button */

                            <button type="button" class="btn btn-info waves-effect waves-light">
                              <i class="icofont icofont-bubble-left"></i>
                            </button>

                            /* for sync Icon Button */

                            <button type="button" class="btn btn-warning waves-effect waves-light">
                              <i class="icofont icofont-refresh"></i>
                            </button>

                            /* for menu Icon Button */

                            <button type="button" class="btn btn-danger waves-effect waves-light">
                              <i class="icofont icofont-navigation-menu"></i>
                            </button>

                            /* for phone Icon Button */

                            <button type="button" class="btn btn-primary waves-effect waves-light">
                              <i class="icofont icofont-mobile-phone"></i>
                            </button>

                            /* for code Icon Button */

                            <button type="button" class="btn btn-warning waves-effect waves-light">
                              <i class="icofont icofont-code-alt"></i>
                            </button>

                            /* for Server Icon Button */

                            <button type="button" class="btn btn-danger waves-effect waves-light">
                              <i class="icofont icofont-server"></i>
                            </button>

##### Round Icon

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.

##### Code Explanation for Round Icon Button

                /* for Home Icon Button */

                <button type="button" class="btn btn-primary btn-icon waves-effect waves-light">
                  <i class="icofont icofont-home"></i>
                </button>

                /* for search Icon Button */

                <button type="button" class="btn btn-success btn-icon waves-effect waves-light">
                  <i class="icofont icofont-search-alt-2"></i>
                </button>

                /* for forward Icon Button */

                <button type="button" class="btn btn-danger btn-icon waves-effect waves-light">
                  <i class="icofont icofont-bubble-right"></i>
                </button>

                /* for backward Icon Button */

                <button type="button" class="btn btn-info btn-icon waves-effect waves-light">
                  <i class="icofont icofont-bubble-left"></i>
                </button>

                /* for sync Icon Button */

                <button type="button" class="btn btn-warning btn-icon waves-effect waves-light">
                  <i class="icofont icofont-refresh"></i>
                </button>

                /* for menu Icon Button */

                <button type="button" class="btn btn-danger btn-icon waves-effect waves-light">
                  <i class="icofont icofont-navigation-menu"></i>
                </button>

                /* for phone Icon Button */

                <button type="button" class="btn btn-primary btn-icon waves-effect waves-light">
                  <i class="icofont icofont-mobile-phone"></i>
                </button>

                /* for code Icon Button */

               <button type="button" class="btn btn-warning btn-icon waves-effect waves-light">
                  <i class="icofont icofont-code-alt"></i>
                </button>

                /* for Server Icon Button */

                <button type="button" class="btn btn-danger btn-icon waves-effect waves-light">
                  <i class="icofont icofont-server"></i>
                </button>

##### Social Button With Label

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

##### Code Explanation for Social Button

                            /* For Facebook Button */

                            <button type="button" class="btn btn-facebook waves-effect waves-light">
                              <span><i class="icofont icofont-social-facebook"></i></span>facebook
                            </button>

                            /* For Twitter Button */

                            <button type="button" class="btn btn-twitter waves-effect waves-light">
                              <span><i class="icofont icofont-social-twitter"></i></span>twitter
                            </button>

                            /* For Linkedin Button */

                            <button type="button" class="btn btn-linkedin waves-effect waves-light">
                              <span><i class="icofont icofont-brand-linkedin"></i></span>linkedin
                            </button>

                            /* For Dribble Button */

                            <button type="button" class="btn btn-dribbble waves-effect waves-light">
                              <span><i class="icofont icofont-social-dribble"></i></span>dribbble
                            </button>

                            /* For Google Plus Button */

                            <button type="button" class="btn btn-google-plus waves-effect waves-light">
                              <span><i class="icofont icofont-social-google-plus"></i></span>google+
                            </button>

                            /* For Instagram Button */

                            <button type="button" class="btn btn-instagram waves-effect waves-light">
                              <span><i class="icofont icofont-social-instagram"></i></span>instagram
                            </button>

                            /* For Pinterest Button */

                            <button type="button" class="btn btn-pinterest waves-effect waves-light">
                              <spa><i class="icofont icofont-social-pinterest"></i></span>pinterest
                            </button>

                            /* For Dropbox Button */

                            <button type="button" class="btn btn-dropbox waves-effect waves-light">
                              <span><i class="icofont icofont-social-dropbox"></i></span>dropbox
                            </button>

                            /* For Tumblr Button */

                            <button type="button" class="btn btn-tumblr waves-effect waves-light">
                              <span><i class="icofont icofont-social-tumblr"></i></span>tumblr
                            </button>

##### Social Button Without Label

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

##### Code Explanation for Social Label

                            /* For Facebook Button */

                            <button type="button" class="btn btn-facebook waves-effect waves-light">
                              <span class="icofont icofont-social-facebook"></span>
                            </button>

                            /* For Twitter Button */

                            <button type="button" class="btn btn-twitter waves-effect waves-light">
                              <span class="icofont icofont-social-twitter"></span>
                            </button>

                            /* For Linkedin Button */

                            <button type="button" class="btn btn-linkedin waves-effect waves-light">
                              <span class="icofont icofont-brand-linkedin"></span>
                            </button>

                            /* For Dribble Button */

                            <button type="button" class="btn btn-dribbble waves-effect waves-light">
                              <span class="icofont icofont-social-dribble"></span>
                            </button>

                            /* For Google Plus Button */

                            <button type="button" class="btn btn-google-plus waves-effect waves-light">
                              <span class="icofont icofont-social-google-plus"></span>
                            </button>

                            /* For Instagram Button */

                            <button type="button" class="btn btn-instagram waves-effect waves-light">
                              <span class="icofont icofont-social-instagram"></span>
                            </button>

                            /* For Pinterest Button */

                            <button type="button" class="btn btn-pinterest waves-effect waves-light">
                              <span class="icofont icofont-social-pinterest"></span>
                            </button>

                            /* For Dropbox Button */

                            <button type="button" class="btn btn-dropbox waves-effect waves-light">
                              <span class="icofont icofont-social-dropbox"></span>
                            </button>

                            /* For Tumblr Button */

                            <button type="button" class="btn btn-tumblr waves-effect waves-light">
                              <span class="icofont icofont-social-tumblr"></span>
                            </button>