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 performed by the user by clicking on it. They are placed uniquely on web pages related to the content. They act as a link to some other page. There are different marketing buttons available in the Primer CSS. Users can use different versions of them depending upon their usage.
- Button types: Marketing buttons can be designed in different types like solid, outlined, borderless, and green.
- Sizes: Marketing buttons can be set to small, medium, and large sizes.
- Animated Arrow Symbol: The marketing button can include an animated arrow symbol.
Primer CSS marketing button classes:
- btn-mktg: This class is used to set the default marketing button.
- btn-muted-mktg: This class is used to set the muted marketing button.
- btn-subtle-mktg: This class is used to set the subtle marketing button.
- btn-signup-mktg: This class is used to set the green marketing button.
- btn-small-mktg: This class is used to create a small marketing button.
- btn-large-mktg: This class is used to create a large marketing button.
- arrow-target-mktg: This class is used to add an animated arrow to the marketing button.
Syntax:
<button class="btn-mktg" type="button"> Action Text... </button>
Example 1: This example demonstrates the Primer CSS buttons types using the btn-mktg class.
<!DOCTYPE html><html>
<head>
<title>Primer CSS Marketing Buttons</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"/>
</head>
<body style="margin:80px">
<div class="text-center">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3><u>Primer CSS Marketing Button Types</u></h3>
<br/>
</div>
<div class="text-center">
<button class="btn-mktg mr-3" type="button">
Solid
</button>
<button class="btn-mktg btn-muted-mktg mr-3"
type="button">
Outlined
</button>
<button class="btn-mktg btn-subtle-mktg mr-3"
type="button">
Borderless
</button>
<button class="btn-mktg btn-signup-mktg"
type="button">
Green
</button>
</div>
</body>
</html>
|
Output:
Example 2: This example demonstrates the Primer CSS buttons sizes using the btn-mktg class.
<!DOCTYPE html><html>
<head>
<title>Primer CSS Marketing Buttons</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"/>
</head>
<body style="margin:80px">
<div class="text-center">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3><u>Primer CSS Marketing Button Sizes</u></h3>
<br/>
</div>
<div class="text-center">
<button class="btn-mktg btn-small-mktg mr-3"
type="button">
Solid Small button
</button>
<button class="btn-mktg btn-muted-mktg mr-3"
type="button">
Outlined Medium button
</button>
<button class="btn-mktg btn-signup-mktg btn-large-mktg mr-3"
type="button">
Large Green button
</button>
</div>
</body>
</html>
|
Output:
Button Sizes
Reference: https://primer.style/css/components/marketing-buttons