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.
Los botones nos ayudan a iniciar una acción, como enviar un formulario, navegar a otro enlace, etc. Primer botón CSS con iconos se utiliza para agregar un icono con el botón. En este artículo, discutiremos el botón Primer CSS con iconos.
Primer botón CSS con clases de iconos:
- btn: esta clase se usa para crear un botón predeterminado básico.
- octicon: esta clase se utiliza para agregar iconos de octicon.
Sintaxis:
<button class="btn mr-2" type="button">
SVG ICON
<span> ... </span>
</button>
Ejemplo 1: El siguiente ejemplo demuestra el botón Primer CSS con iconos.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Button with Icons </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Button with Icons </h3> <br> <button class="btn-octicon mr-2" type="button"> <svg class="octicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16" > <path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"> </path> </svg> </button> <button class="btn-octicon mr-2" type="button"> <svg class="octicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16" > <path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"> </path> </svg> </button> </div> </body> </html>
Producción:
Primer botón CSS con iconos
Ejemplo 2: El siguiente ejemplo demuestra el botón Primer CSS con iconos.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Button with Icons </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Button with Icons </h3> <br> <button class="btn mr-2" type="button"> <svg class="octicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16" > <path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"> </path> </svg> <span> GFG 1 </span> </button> <button class="btn btn-primary mr-2" type="button"> <svg class="octicon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16" > <path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"> </path> </svg> <span> GFG 2 </span> </button> </div> </body> </html>
Producción:
Primer botón CSS con iconos
Referencia: https://primer.style/css/components/buttons#button-with-icons
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA