Prime CSS Marketing Buttons Animated Arrow Symbol
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.
Primer CSS offers Marketing Buttons that use the main class .btn-mktg along with some modifier classes to create colorful buttons. In this article, we will discuss Primer CSS Marketing Buttons Animated Arrow Symbols along with some working examples.
Primer CSS Marketing Buttons Animated Arrow Symbols Class:
- arrow-target-mktg: This class is used to create an animated arrow symbol on hovering the button.
Syntax:
<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>
Example 1: Below is the example that demonstrates the use of Primer CSS Marketing Buttons Animated Arrow Symbols.
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 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> |
Output:
Primer CSS Marketing Buttons Animated Arrow Symbols
Example 2: Below is another example that demonstrates the use of Primer CSS Marketing Buttons Animated Arrow Symbols.
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 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 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> |
Output:
Primer CSS Marketing Buttons Animated Arrow Symbols
Reference: https://primer.style/css/components/marketing-buttons#animated-arrow-symbol
Please Login to comment...