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 Link Colors
The Primer CSS is a framework that allows users to add pre-defined styles to HTML elements. We can use Primer CSS to style various HTML elements such as buttons, links, forms, etc.
In this tutorial, we will learn to style HTML links with various colors using Primer CSS marketing link classes.
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
<a class="Link--primary" href="#url">Primary Link</a>
Available Link Color Classes
| Class Name | Description |
|---|---|
Link--primary |
Applies primary color (blue) styling |
Link--secondary |
Applies secondary color styling |
Link--onHover |
Shows link styling only on hover |
color-fg-muted |
Muted text color for subtle links |
Example 1: Primary and Secondary Links
The following example demonstrates primary and secondary link colors. The primary link appears in blue color, while the secondary link has a subtle appearance
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
<style>
a {
font-size: 1.6rem;
margin: 10px;
display: inline-block;
}
</style>
</head>
<body>
<h2>Using Primer CSS to style links</h2>
<div>
<a class="Link--primary" href="/javascript/index.htm">Primary Link</a>
</div>
<div>
<a class="Link--secondary" href="/codingground.htm">Secondary Link</a>
</div>
</body>
</html>
Two links appear: "Primary Link" in blue color and "Secondary Link" in a subtle gray color. Both change appearance on hover.
Example 2: Muted Links with Hover Effects
This example shows how to create muted links with selective hover effects using nested elements
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
<style>
a {
font-size: 1.8rem;
}
</style>
</head>
<body>
<h2>Muted link with selective hover</h2>
<a class="color-fg-muted no-underline" href="/javascript/index.htm">
No hover effect --- <span class="Link--onHover">Hover on this part</span>
</a>
</body>
</html>
A muted gray link where only the "Hover on this part" section shows link styling when hovered.
Example 3: Links with Icons
The following example demonstrates how to add SVG icons to links using Primer CSS classes
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
<style>
a {
font-size: 1.7rem;
}
</style>
</head>
<body>
<h2>Link with icon using Primer CSS</h2>
<a class="Link--primary text-bold" href="/codingground.htm">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z" />
</svg>
<span class="color-fg-muted">Coding Ground</span>
</a>
</body>
</html>
A blue link with a code icon followed by "Coding Ground" text in muted color.
Conclusion
Primer CSS provides an easy way to style links with predefined color classes. Use Link--primary for emphasis, Link--secondary for subtle styling, and combine with utility classes like color-fg-muted for advanced customization.
220 Views
