Prime CSS Marketing Buttons Animated Arrow Symbol
Last Updated :
23 Jul, 2025
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="https://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/[email protected]/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="https://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>
Output:
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/[email protected]/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="https://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="https://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>
Output:
Reference: https://primer.style/#animated-arrow-symbol
Similar Reads
Primer CSS Marketing Buttons 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. It is highly reusable and flexible. It is created with GitHub’s design system.Buttons are used to define an action that can be perf
2 min read
Primer CSS Marketing Buttons Sizes 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
2 min read
Semantic-UI Button Type Animated Semantic-UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like boots
2 min read
Primer CSS Fade in Animation 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
2 min read
Primer CSS Toast animation in 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
2 min read
Split Skewed Button Hover Animation using CSS Split Skewed Button Hover Animation effect can be created using the before and after pseudo-classes in CSS. On hovering change skewness and swap the positions of before and after pseudo-class. Steps: Create an HTML file named index.html.Create a div element for the button.Add styles to the button.On
2 min read