- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Button Coloring
Description
Buttons can be colored to give them an additional meaning. Buttons can be disabled by using .disabled class, which displays the button as faded and it will not disable the control. If you want to disable the <button> elements, add disabled attribute to it. If you want to disable a link, add aria-disabled attribute.
Example
The following example demonstrates how to color the buttons in Foundation.
<html> <head> <title>Button Coloring</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous"> </head> <body> <a class = "secondary button" href = "#">Secondary</a> <button type = "button" class = "success button">Success</button> <button type = "button" class = "alert button">Alert</button> <a class = "warning button" href = "#">Warning</a> <a class = "disabled button" href = "#">Disabled</a> <button type = "button" class = "disabled button">Disabled</button> <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script> <script> $(document).ready(function() { $(document).foundation(); }) </script> </body> </html>
Output
Let us carry out the following steps to see how the above given code works −
Save the above given html code button_coloring.html file.
Open this HTML file in a browser, an output is displayed as shown below.
foundation_basic_controls.htm
Advertisements