Foundation CSS Controls Complete Reference Improve Improve Like Article Like Save Share Report Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Foundation CSS Controls use to create different types of switches, buttons, sliders, and translations and control them as requirements like coloring switches, sizing switches, range sliders, and many things you can do it. Complete list of Foundation CSS Control are listed below: Foundation CSS Button Foundation CSS Button Basics Foundation CSS Button Sizing Foundation CSS Button Coloring Foundation CSS Button Hollow Style Foundation CSS Button Disabled Foundation CSS Button Clear Style Foundation CSS Button Dropdown Arrows Foundation CSS Button Accessibility Foundation CSS Button Sass Reference Foundation CSS Button Group Foundation CSS Button Group Basics Foundation CSS Button Group Sizing Foundation CSS Button Group Coloring Foundation CSS Button Group Hollow and clear Foundation CSS Button Group No Gaps Foundation CSS Button Even-width Group Foundation CSS Button Group Stacking Foundation CSS Button Group Split Foundation CSS Button Group Flexbox Foundation CSS Button Group Sass Reference Foundation CSS Close Button Foundation CSS Close Button Sass Reference Foundation CSS Slider Foundation CSS Slider Basics Foundation CSS Slider Vertical Foundation CSS Slider Disabled Foundation CSS Slider Two Handles Foundation CSS Slider Data Binding Foundation CSS Native Range Slider Foundation CSS Slider Non-linear value translation Foundation CSS Slider Reflow Foundation CSS Slider Sass Reference Foundation CSS Slider JavaScript Reference Foundation CSS Switch Foundation CSS Switch Basics Foundation CSS Switch Disabled Foundation CSS Radio Switch Foundation CSS Switch Sizing Classes Foundation CSS Switch Inner Labels Foundation CSS Switch Sass Reference Example: HTML <!DOCTYPE html> <html lang="en"> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> </head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Foundation CSS Button Basics </h3> <a href="#" class="button"> GFG Button 1 </a> <a href="#" class="button"> GFG Button 2 </a> <a href="#" class="button"> GFG Button 3 </a> <a href="#" class="button"> GFG Button 4 </a> <center> <strong>Foundation CSS Switch</strong> <br/><br/> <div class="switch"> <input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch"> <label class="switch-paddle" for="exampleSwitch"> <span class="show-for-sr">GeeksforGeeks</span> </label> </div> </center> </center> </body> </html> Output: Last Updated : 10 Jun, 2022 Like Article Save Article Previous Foundation CSS Switch Next Foundation CSS Badge Share your thoughts in the comments Add Your Comment Please Login to comment...