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. Podemos crear un botón usando la clase de botón y usar la clase de grupo de botones para crear un elemento de grupo de botones. El grupo de botones Hueco y transparente se utiliza para dar estilos huecos y claros a los botones. Los botones se pueden diseñar individualmente o podemos diseñar todo el grupo usando la misma clase. En este artículo, discutiremos Button Group Hollow y Clear en Foundation CSS.
Foundation CSS Button Group Clases huecas y claras:
- hueco: Esta clase se usa para dar un estilo hueco al botón. En esto, solo el borde y el texto del botón son visibles.
- clear: esta clase se utiliza para dar un estilo claro al botón. En esto, solo se ve el texto del botón.
Sintaxis:
<a class="button hollow">....</a>
<a class="button clear">....</a>
Ejemplo 1: el siguiente código demuestra el estilo hueco de grupo de botones para diseñar los botones individualmente y para diseñar todo el grupo usando la misma clase.
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"> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Button Group Hollow & clear</h3> <strong> Using individual <i>hollow</i> class </strong> <div class="button-group"> <a class="primary button hollow"> Primary </a> <a class="secondary button hollow"> Secondary </a> <a class="success button hollow"> Success </a> <a class="warning button hollow"> Warning </a> <a class="alert button hollow">Alert </a> </div> <strong> Style entire group using <i>hollow</i> class </strong> <div class="button-group hollow"> <a class="primary button"> Primary </a> <a class="secondary button"> Secondary </a> <a class="success button"> Success </a> <a class="warning button"> Warning </a> <a class="alert button"> Alert </a> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente código demuestra el estilo de Borrar grupo de botones para diseñar los botones individualmente y para diseñar todo el grupo usando la misma clase.
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"> </head> <body style="padding:1%"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Foundation CSS Button Group Hollow & clear</h3> <strong> Using individual <i>clear</i> class </strong> <div class="button-group"> <a class="primary button clear"> Primary </a> <a class="secondary button clear"> Secondary </a> <a class="success button clear"> Success </a> <a class="warning button clear"> Warning </a> <a class="alert button clear">Alert </a> </div> <strong> Style entire group using <i>clear</i> class </strong> <div class="button-group clear"> <a class="primary button"> Primary </a> <a class="secondary button"> Secondary </a> <a class="success button"> Success </a> <a class="warning button"> Warning </a> <a class="alert button"> Alert </a> </div> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/button-group.html#hollow-and-clear
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA