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 variaciones de botones.
- Tamaños : el botón se puede diseñar en diferentes tamaños utilizando las clases btn , btn-sm y btn-large .
- Botón de bloque : el botón puede ocupar todo el ancho utilizando la clase btn-block .
- Botón de enlace : el botón se puede diseñar para que parezca un enlace utilizando la clase btn-link .
- Botón invisible : un enlace que actúa como un botón al pasar el mouse usando la clase btn-invisible .
- Botón oculto : el usuario puede diseñar un botón para indicar texto oculto utilizando la clase de expansión de texto oculto .
Primer clases de variaciones de botón CSS:
- btn: esta clase se utiliza para establecer el botón predeterminado.
- btn-sm: esta clase se usa para configurar el botón pequeño.
- btn-large: Esta clase se usa para configurar el botón grande.
- btn-block: esta clase se usa para configurar el botón en ancho completo.
- btn-link: esta clase se utiliza para crear un botón con un enlace de fácil acceso.
- btn-invisible: esta clase se usa para crear un enlace que actúa como un botón.
- hidden-text-expander: esta clase se utiliza para crear un botón de texto oculto.
Sintaxis:
<button class="btn" type="button"> Text to be shown... </button>
Ejemplo: Este ejemplo demuestra las diferentes variaciones de los botones Primer CSS usando la clase btn .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Button Variations</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body style="margin:100px"> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3><u>Primer CSS Button Variations</u></h3> <br /> </div> <div class="d-flex flex-justify-center"> <button class="btn-sm btn-link mr-4" type="button"> Small Link Button </button> <button class="btn mr-3" type="button"> Basic button </button> <button class="btn btn-large btn-outline" type="button"> Large Button </button> </div><br /> <div class="d-flex flex-justify-center"> <button class="btn btn-block" type="button"> Block Button </button> </div><br /> <h5 class="text-center"> <u>Hidden Text Button</u> </h5> <div class="d-flex flex-justify-center"> <span class="hidden-text-expander"> <button type="button" class="ellipsis-expander">....</button> </span> </div> </body> </html>
Producción:
Variaciones de botones
Enlace de referencia: https://primer.style/css/components/buttons#button-variations
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA