Foundation CSS es el marco frontend de CSS que se utiliza para crear sitios web, aplicaciones y correos electrónicos receptivos que funcionan perfectamente en cualquier dispositivo. Está escrito usando HTML, CSS y Javascript y es utilizado por muchas compañías famosas como Amazon, Facebook, eBay, etc. Utiliza paquetes como Grunt y Libsass para una codificación y control rápidos y un compilador Saas para acelerar el desarrollo. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Los botones son uno de los elementos de interfaz de usuario más comunes. Cuando queremos realizar alguna acción y queremos navegar a una página diferente, podemos usar el botón. Podemos crear el botón usando la etiqueta <a> y la etiqueta <button> . La etiqueta <a> se usa cuando queremos navegar y la etiqueta <button> se usa cuando queremos realizar alguna acción que pueda cambiar algo en la página. Si usamos la etiqueta <button> , agregue el atributo type=»button» y si queremos enviar un formulario, elimine este atributo y agregue la clase de envío .
En este artículo, discutiremos los conceptos básicos de los botones en Foundation CSS.
Conceptos básicos del botón Foundation CSS Clase:
- button : Se utiliza para crear el botón para realizar alguna acción.
Sintaxis:
<button class="button"> .... </button>
Ejemplo 1: El siguiente código demuestra los conceptos básicos de los botones usando una etiqueta <a> .
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> </body> </html>
Producción:
Conceptos básicos del botón Foundation CSS
Ejemplo 2: El siguiente código demuestra los conceptos básicos de los botones usando una etiqueta <button> .
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> <button class="button"> GFG Button 1 </button> <button class="secondary button"> GFG Button 2 </button> <button class="success button"> GFG Button 3 </button> <button class="alert button"> GFG Button 4 </button> </center> </body> </html>
Producción:
Conceptos básicos del botón Foundation CSS
Enlace de referencia: https://get.foundation/sites/docs/button.html#basics
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA