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 orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS Button with Counts se usa para agregar el contador con el botón pequeño. Para agregar el contador, usaremos las clases btn-with-count, btn-sm y social-count . En este artículo, discutiremos Primer CSS Button con Counts.
Primer botón CSS con clases Counts:
- btn-sm: esta clase se usa para crear el botón pequeño.
- btn-with-count: Esta clase se usa para crear el botón con el conteo.
- social-count: esta clase se utiliza para crear el contador.
Sintaxis:
<div class="clearfix">
<a class="btn btn-sm btn-with-count"
href="#url" role="button">
...
</a>
<a class="social-count" href="#url">...</a>
</div>
Ejemplo 1: El siguiente ejemplo demuestra el uso de Primer CSS Button con Counts.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Button with Counts </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body class="m-2"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Button with Counts </h3> <br> <div class="clearfix"> <a class="btn btn-sm btn-with-count" href="#" role="button"> <span> GFG </span> </a> <a class="social-count" href="#"> 12 </a> </div> </body> </html>
Producción:
Primer botón CSS con recuentos
Ejemplo 2: El siguiente ejemplo demuestra el uso de Primer CSS Button con Counts.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Button with Counts </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body class="m-2"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Button with Counts </h3> <br> <button class="btn btn-primary mr-1" type="button"> Java <span class="Counter"> 4 </span> </button> <button class="btn btn-danger mr-1" type="button"> Python <span class="Counter"> 45 </span> </button> <button class="btn btn-outline" type="button"> C++ <span class="Counter"> 9 </span> </button> </body> </html>
Producción:
Primer botón CSS con recuentos
Referencia: https://primer.style/css/components/buttons#button-with-counts
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA