Styles: Buttons

CSS STYLES ☰

Dynamic "chameleon" buttons that change color with the palettes


Simple Buttons

Default Button

lighter on hover
Button
<!-- BUTTON MODULE -->
  <a class="btn btn-default dye_filter-light-hover" href="#">Button</a>
<!-- /BUTTON MODULE -->


darker on hover
Button
<!-- BUTTON MODULE -->
  <a class="btn btn-default dye_filter-dark-hover" href="#">Button</a>
<!-- /BUTTON MODULE -->


Navi Color Button

Button
                  <!-- BUTTON MODULE --> <a class="btn dye_navi_lt dye_navi_vlt-hover"
                    href="#">Button</a>
                  <!-- /BUTTON MODULE -->


Body Color Button

Button
                  <!-- BUTTON MODULE --> <a class="btn dye_color1_lt dye_color1_vlt-hover"
                    href="#">Button</a>
                  <!-- /BUTTON MODULE -->


Double Buttons

Navi Color Double Button


                  <!-- BUTTON MODULE -->
                  <div style="padding: 2px;" class="btn btn-default dye_navi_md dye_navi_dk-hover">
                    <a style="margin: 2px; padding-top: 2px; padding-bottom: 2px;"

                      class="btn btn-default dye_navi_vlt dye_navi_xlt-hover btn-sm"

                      href="#">Cool Button! </a> </div>
                  <!-- /BUTTON MODULE -->


Body Color Double Button


                  <!-- BUTTON MODULE -->
                  <div style="padding: 2px;" class="btn btn-default dye_color1_md dye_color1i_dk-hover">
                    <a style="margin: 2px; padding-top: 2px; padding-bottom: 2px;"

                      class="btn btn-default dye_color1_vlt dye_color1_xlt-hover btn-sm"

                      href="#">Cool Button! </a> </div>
                  <!-- /BUTTON MODULE -->


Triple Buttons

Navi Color Button


                  <!-- BUTTON MODULE -->
                  <div style="padding: 1px;" class="btn dye_navi_vdk dye_navi_md-hover">
                    <p style="padding: 1px;" class="btn dye_navi_md dye_navi_vlt-hover">
                      <a style="margin: 1px; padding-top: 1px; padding-bottom: 1px;"

                        class="btn dye_navi_vlt dye_navi_xlt-hover btn-sm" href="#">Cooler
                        Button! </a></p>
                  </div>
                  <!-- /BUTTON MODULE -->

Body Color Button


                  <!-- BUTTON MODULE -->
                  <div style="padding: 1px;" class="btn dye_color1_vdk dye_color1_md-hover">
                    <p style="padding: 1px;" class="btn dye_color1_md dye_color1_vlt-hover">
                      <a style="margin: 1px; padding-top: 1px; padding-bottom: 1px;"

                        class="btn dye_color1_vlt dye_color1_xlt-hover btn-sm" href="#">Cooler
                        Button! </a></p>
                  </div>
                  <!-- /BUTTON MODULE -->










 
© SiteDyes.com 2018
Web colors by SiteDyes.com