Prime CSS Marketing Buttons Animated Arrow Symbol

Last Updated : 24 Apr, 2022

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 
            <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>

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 
            <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>