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 utilizan la clase principal. btn-mktg junto con algunas clases de modificadores para crear botones coloridos. En este artículo, discutiremos los símbolos de flecha animados de los botones de marketing de Primer CSS junto con algunos ejemplos prácticos.
Primer CSS Marketing Botones Símbolos de flecha animados Clase:
- arrow-target-mktg: esta clase se usa para crear un símbolo de flecha animado al pasar el botón.
Sintaxis:
<button class="btn-mktg arrow-target-mktg" type="button">
...
<svg xmlns="http://www.w3.org/2000/svg"
class="octicon arrow-symbol-mktg">
<path fill="currentColor" d="...."></path>
<path stroke="currentColor" d="...."></path>
</svg>
</button>
Ejemplo 1: a continuación se muestra el ejemplo que demuestra el uso de los símbolos de flecha animados de los botones de marketing de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Marketing Buttons Animated Arrow Symbols </title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Marketing Buttons Animated Arrow Symbols </h3> <button class="btn-mktg arrow-target-mktg mt-3" type="button"> Course on GeeksforGeeks <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg"> <path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"> </path> <path stroke="currentColor" d="M1.75 8H11" stroke-width="2"> </path> </svg> </button> </center> </body> </html>
Producción:
Primer CSS Botones de marketing Símbolos de flecha animados
Ejemplo 2: a continuación se muestra otro ejemplo que demuestra el uso de los símbolos de flecha animados de los botones de marketing de Primer CSS.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Marketing Buttons Animated Arrow Symbols </title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <center> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Marketing Buttons Animated Arrow Symbols </h3> <button class="btn-mktg arrow-target-mktg btn-muted-mktg mt-3" type="button"> Jobs on GeeksforGeeks <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg"> <path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"> </path> <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="square"> </path> </svg> </button> <button class="btn-mktg arrow-target-mktg btn-subtle-mktg mt-3" type="button"> Articles on GeeksforGeeks <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg"> <path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"> </path> <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="square"> </path> </svg> </button> </center> </body> </html>
Producción:
Primer CSS Botones de marketing Símbolos de flecha animados
Referencia: https://primer.style/css/components/marketing-buttons#animated-arrow-symbol