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. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientados a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible.
Los botones nos ayudan a iniciar una acción como enviar un formulario, navegar a otro enlace, etc. .btn <botón> <a>
Componentes básicos del botón CSS:
- Tipos de botones : este componente se utiliza para crear el botón con un tipo de acción específico cuando el usuario realiza alguna acción.
- Estados del botón: este componente se utiliza para definir el estado del botón al realizar la acción específica.
- Variaciones del botón : este componente se usa para especificar las diferentes variaciones que se pueden usar con el botón.
- Botones de iconos : este componente se utiliza para demostrar el botón con diferentes iconos.
- Botón con conteos : Este componente se utiliza para indicar o mostrar el conteo, con el fin de notificar con el botón.
- Grupos de botones: el componente muestra una serie de botones que tienen diferentes tamaños, colores y otras variaciones similares.
Sintaxis:
<button class="class-name">....</button>
Ejemplo 1: Este ejemplo describe los botones CSS de Primer especificando las diferentes acciones de los botones.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> </head> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h3>Primer CSS Button</h3> <br> <button class="btn btn-primary" type="button"> Primary </button> <button class="btn" type="button"> Default </button> <button class="btn btn-outline" type="button"> Outline </button> <button class="btn btn-danger" type="button"> Danger </button> </center> </body> </html>
Producción:
Ejemplo 2: este ejemplo describe el botón Primer CSS especificando los diferentes recuentos con diferentes tipos de botones.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" /> </head> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h3>Primer CSS Button</h3> <br> <button class="btn btn-danger mr-2" type="button"> New Notification <span class="Counter">12</span> </button> <button class="btn btn-outline mr-2" type="button"> Pending <span class="Counter">6</span> </button> <button class="btn btn-primary mr-2" type="button"> Completed <span class="Counter">15</span> </button> </center> </body> </html>
Producción:
Referencia: https://primer.style/css/components/buttons
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA