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 ofrece botones de marketing que vienen en varios tamaños y colores. Los botones de marketing se pueden crear agregando la clase principal como .btn-mktg junto con un conjunto de diferentes clases de modificadores.
Primer CSS Marketing Botones Clases de tamaños utilizados:
- btn-small-mktg: Esta clase se utiliza para crear botones de tamaño pequeño en Primer CSS Marketing.
- btn-medium-mktg: Esta clase se utiliza para crear botones de tamaño mediano en Primer CSS Marketing. Estos son los botones de tamaño predeterminado.
- btn-large-mktg: Esta clase se utiliza para crear botones de gran tamaño en Primer CSS Marketing.
Sintaxis:
<button class="btn-mktg btn-small-mktg ||
btn-large-mktg " type="button">
...
</button>
Ejemplo 1: El siguiente ejemplo demuestra el uso de los tamaños de los botones de marketing de Primer CSS utilizando la clase btn-small-mktg .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Marketing Buttons Sizes. </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <center> <h1 class="color-fg-success text-center"> GeeksforGeeks </h1> <h3 class="text-center"> Primer CSS Marketing Buttons Sizes. </h3> <br> <button type="button" class= "btn-mktg btn-small-mktg"> Tutorials </button> <button type="button" class= "btn-mktg btn-small-mktg btn-muted-mktg"> Jobs </button> <button type="button" class= "btn-mktg btn-small-mktg btn-subtle-mktg"> Courses </button> <button type="button" class= "btn-mktg btn-small-mktg btn-signup-mktg"> Pick an article </button> </center> </body> </html>
Producción:
Primer CSS Marketing Botones Tamaños
Ejemplo 2: El siguiente ejemplo demuestra el uso de los tamaños de los botones de marketing de Primer CSS utilizando la clase btn-large-mktg .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Marketing Buttons Sizes. </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <center> <h1 class="color-fg-success text-center"> GeeksforGeeks </h1> <h3 class="text-center"> Primer CSS Marketing Buttons Sizes. </h3> <br> <button type="button" class= "btn-mktg btn-large-mktg btn-signup-mktg"> Pick an article </button> <button type="button" class= "btn-mktg btn-large-mktg btn-muted-mktg"> Jobs </button> <button type="button" class= "btn-mktg btn-large-mktg"> Tutorials </button> <button type="button" class= "btn-mktg btn-large-mktg btn-subtle-mktg"> Courses </button> </center> </body> </html>
Producción:
Primer CSS Marketing Botones Tamaños
Referencia: https://primer.style/css/components/marketing-buttons#sizes
Publicación traducida automáticamente
Artículo escrito por yourcontactformsubmitted y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA