Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Prime CSS Marketing Buttons Animated Arrow Symbol
Marketing buttons are crucial for attracting users to your product or service. They serve as call-to-action elements that guide users toward desired actions like signing up, purchasing, or learning more. Adding animated arrow symbols to these buttons can significantly improve user engagement and conversion rates.
In this tutorial, we will use the Primer CSS framework to create professional marketing buttons with animated arrow symbols that respond to user interactions.
Installation: To use Primer CSS, include the CDN link in your HTML head section:
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
Syntax
<button class="btn-mktg arrow-target-mktg" type="button"> Button Text <!-- SVG arrow icon --> </button>
Key Classes
| Class | Description |
|---|---|
btn-mktg |
Base marketing button styling |
arrow-target-mktg |
Enables arrow animation on hover |
btn-muted-mktg |
Muted button variant |
btn-subtle-mktg |
Subtle button variant |
btn-signup-mktg |
Signup button variant |
Example 1: Basic Marketing Button
The following example creates a basic marketing button with an animated arrow icon
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
</head>
<body>
<h2>Marketing Button with Animated Arrow</h2>
<button class="btn-mktg arrow-target-mktg btn-muted-mktg mr-3" type="button">
Enroll Now
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 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="round"></path>
</svg>
</button>
</body>
</html>
A muted marketing button with "Enroll Now" text appears with an arrow icon. When hovered, the arrow animates with a smooth sliding effect.
Example 2: Dynamic Button Styles
This example demonstrates different button variants with interactive radio buttons to change styles dynamically
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
</head>
<body>
<h2>Dynamic Marketing Button Styles</h2>
<button class="btn-mktg arrow-target-mktg mr-3" type="button">
Get Started
<svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 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="round"></path>
</svg>
</button>
<div style="margin-top: 20px;">
<h3>Choose Button Style:</h3>
<input type="radio" id="normal" name="button" value="normal" checked>
<label for="normal">Normal</label><br>
<input type="radio" id="muted" name="button" value="muted">
<label for="muted">Muted</label><br>
<input type="radio" id="subtle" name="button" value="subtle">
<label for="subtle">Subtle</label><br>
<input type="radio" id="signup" name="button" value="signup">
<label for="signup">Signup</label>
</div>
<script>
const btn = document.querySelector(".btn-mktg");
document.getElementsByName('button').forEach(radio =>
radio.addEventListener('change', function() {
const selectedValue = document.querySelector('input[name="button"]:checked').value;
switch(selectedValue) {
case "normal":
btn.className = "btn-mktg arrow-target-mktg mr-3";
break;
case "muted":
btn.className = "btn-mktg arrow-target-mktg btn-muted-mktg mr-3";
break;
case "subtle":
btn.className = "btn-mktg arrow-target-mktg btn-subtle-mktg mr-3";
break;
case "signup":
btn.className = "btn-mktg arrow-target-mktg btn-signup-mktg mr-3";
break;
}
})
);
</script>
</body>
</html>
A marketing button with "Get Started" text and radio buttons below it. Selecting different radio options changes the button's appearance (normal, muted, subtle, or signup style) while maintaining the animated arrow functionality.
Conclusion
Primer CSS marketing buttons with animated arrows provide an effective way to create engaging call-to-action elements. The framework offers multiple style variants and smooth animations that enhance user experience and improve conversion rates.
292 Views
