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 altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Los botones se utilizan para definir una acción que el usuario puede realizar haciendo clic en él. Se colocan únicamente en páginas web relacionadas con el contenido. Actúan como un enlace a alguna otra página. Hay diferentes botones de marketing disponibles en Primer CSS. Los usuarios pueden usar diferentes versiones de ellos dependiendo de su uso.
- Tipos de botones: los botones de marketing se pueden diseñar en diferentes tipos, como sólidos, con contorno, sin bordes y verdes.
- Tamaños : los botones de marketing se pueden configurar en tamaños pequeño, mediano y grande.
- Símbolo de flecha animada : el botón de marketing puede incluir un símbolo de flecha animada.
Clases de botones de marketing de Primer CSS:
- btn-mktg : esta clase se utiliza para establecer el botón de marketing predeterminado.
- btn-muted-mktg: esta clase se usa para configurar el botón de marketing silenciado.
- btn-subtle-mktg : esta clase se usa para configurar el botón de marketing sutil.
- btn-signup-mktg : esta clase se usa para configurar el botón verde de marketing.
- btn-small-mktg: esta clase se utiliza para crear un pequeño botón de marketing.
- btn-large-mktg: esta clase se utiliza para crear un gran botón de marketing.
- arrow-target-mktg : esta clase se usa para agregar una flecha animada al botón de marketing.
Sintaxis:
<button class="btn-mktg" type="button"> Action Text... </button>
Ejemplo 1: Este ejemplo demuestra los tipos de botones de Primer CSS usando la clase btn-mktg .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Marketing Buttons</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"/> </head> <body style="margin:80px"> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3><u>Primer CSS Marketing Button Types</u></h3> <br/> </div> <div class="text-center"> <button class="btn-mktg mr-3" type="button"> Solid </button> <button class="btn-mktg btn-muted-mktg mr-3" type="button"> Outlined </button> <button class="btn-mktg btn-subtle-mktg mr-3" type="button"> Borderless </button> <button class="btn-mktg btn-signup-mktg" type="button"> Green </button> </div> </body> </html>
Producción:
Ejemplo 2: Este ejemplo demuestra los tamaños de botones de Primer CSS usando la clase btn-mktg .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Marketing Buttons</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"/> </head> <body style="margin:80px"> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3><u>Primer CSS Marketing Button Sizes</u></h3> <br/> </div> <div class="text-center"> <button class="btn-mktg btn-small-mktg mr-3" type="button"> Solid Small button </button> <button class="btn-mktg btn-muted-mktg mr-3" type="button"> Outlined Medium button </button> <button class="btn-mktg btn-signup-mktg btn-large-mktg mr-3" type="button"> Large Green button </button> </div> </body> </html>
Producción:
Tamaños de botones
Referencia : https://primer.style/css/components/marketing-buttons
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA