Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Es un sistema que nos ayuda a construir experiencias de usuario consistentes de manera eficiente con suficiente flexibilidad. Este enfoque sistemático garantiza que nuestros estilos sean coherentes e interoperables entre sí. Cuenta con una escala de espaciado altamente componible, tipografía personalizable y colores significativos. Es altamente reutilizable y flexible y se crea con el sistema de diseño de GitHub.
Un botón es un componente importante en cualquier sitio web que se utiliza para generar eventos cada vez que el usuario hace clic en el botón. Primer CSS nos proporciona varios estados de botones. Esta funcionalidad se conoce como Estados de botón en Primer CSS.
Primer CSS Botón Estados Clases:
- btn: esta clase se usa para crear un botón simple para acciones generales de la página. Se conoce como el botón predeterminado.
- aria-selected=”true”: este atributo se utiliza para crear un botón que se encuentra en el estado seleccionado.
- aria-disabled=”true”: este atributo se usa para crear un botón que está en estado deshabilitado.
Sintaxis:
<button class="btn" type="button" aria-selected="true">
...
</button>
La sintaxis anterior es para un botón seleccionado. Para crear un botón deshabilitado, se reemplazó aria-selected=”true” con aria-disabled=”true”.
Ejemplo 1: El siguiente ejemplo demuestra el uso del atributo aria-selected=”true” para crear un botón con un estado seleccionado.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Button States </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-left"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Button States </h3> </div> <br> <div class="BtnGroup"> <button class="BtnGroup-item btn" type="button"> Button </button> <button class="BtnGroup-item btn" type="button" aria-selected="true"> <!--Select State--> Selected Button </button> <button class="BtnGroup-item btn " type="button"> Button </button> <button class="BtnGroup-item btn" type="button" aria-selected="true"> Selected Button </button> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el uso del atributo aria-disabled=”true” para crear un botón con un estado deshabilitado.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Button States </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-left"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Button States </h3> </div> <br> <div class="BtnGroup"> <button class="BtnGroup-item btn" type="button"> Button </button> <button class="BtnGroup-item btn" type="button" aria-disabled="true"> <!--Disabled State--> Disabled Button </button> <button class="BtnGroup-item btn " type="button"> Button </button> <button class="BtnGroup-item btn" type="button" aria-disabled="true"> Disabled Button </button> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/buttons
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA