Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Foundation CSS Button Disabled se usa para crear un botón deshabilitado. La clase .disabled se usa para crear el botón deshabilitado. Para el elemento de botón, usaremos un atributo deshabilitado para deshabilitar el botón. Usaremos el atributo aria-disabled si queremos deshabilitar el enlace.
Clases usadas:
- disabled: esta clase se utiliza para desactivar el elemento de botón.
Atributos usados:
- disabled: este atributo también se utiliza para desactivar el elemento de botón.
- aria-disabled: Este atributo se usa si queremos deshabilitar el elemento link.
Sintaxis:
<a class="button disabled"
href="#" aria-disabled>
Disabled Button
</a>
or
<button type="button"
class="button" disabled>
Disabled Button
</button>
Ejemplo 1: en este ejemplo, crearemos botones usando la etiqueta <a> y agregaremos la clase de botón para hacer que el elemento de anclaje se ajuste al tipo de botón. Además, agregue un poco de color de botón para que el botón sea colorido y use la clase deshabilitada para deshabilitar el botón.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Button Disabled</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"></script> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Button Disabled</h3> <a class="button disabled primary" href="#" aria-disabled> Button 1 </a> <a class="button disabled secondary" href="#" aria-disabled> Button 2 </a> <a class="button disabled success" href="#" aria-disabled> Button 3 </a> <a class="button disabled alert" href="#" aria-disabled> Button 4 </a> <a class="button disabled warning" href="#" aria-disabled> Button 5 </a> </center> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, crearemos botones usando la etiqueta <button> y agregaremos la clase de botón. Además, agregue un poco de color de botón para que el botón sea colorido y use un atributo deshabilitado para deshabilitar el botón.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Button Disabled</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"></script> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Button Disabled</h3> <button type="button" class="button primary" disabled> Button 1 </button> <button type="button" class="button secondary" disabled> Button 2 </button> <button type="button" class="button success" disabled> Button 3 </button> <button type="button" class="button alert" disabled> Button 4 </button> <button type="button" class="button warning" disabled> Button 5 </button> </center> </body> </html>
Producción:
Ejemplo 3: En este ejemplo, crearemos botones huecos usando la etiqueta <a> y agregaremos clases de botón y huecos para hacer un elemento de anclaje al botón hueco. Además, agregue un poco de color de botón para que los botones huecos sean coloridos y use la clase deshabilitada para deshabilitar el botón.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Button Disabled</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"></script> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Button Disabled</h3> <a class="button hollow disabled primary" href="#" aria-disabled> Button 1 </a> <a class="button hollow disabled secondary" href="#" aria-disabled> Button 2 </a> <a class="button hollow disabled success" href="#" aria-disabled> Button 3 </a> <a class="button hollow disabled alert" href="#" aria-disabled> Button 4 </a> <a class="button hollow disabled warning" href="#" aria-disabled> Button 5 </a> </center> </body> </html>
Producción:
Ejemplo 4: En este ejemplo, crearemos botones usando la etiqueta <button> y agregaremos un botón y una clase hueca para hacer que el elemento de anclaje se convierta en un tipo de botón hueco. Además, agregue un poco de color de botón para que el botón hueco sea colorido y use la clase deshabilitada para deshabilitar el botón.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Button Disabled</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin="anonymous"></script> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Button Disabled</h3> <button type="button" class="button hollow primary" disabled> Button 1 </button> <button type="button" class="button hollow secondary" disabled> Button 2 </button> <button type="button" class="button hollow success" disabled> Button 3 </button> <button type="button" class="button hollow alert" disabled> Button 4 </button> <button type="button" class="button hollow warning" disabled> Button 5 </button> </center> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/button.html#disabled-buttons