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.
Buttons help us to initiate an action such as submitting a form, navigating to another link, etc. To create a button in Primer CSS, we use the .btn class on the <button> or <a> tag.
Primer CSS Button Components:
- Button types: This component is used to create the button with having a specific action type when the user performs some action.
- Button states: This component is used to define the state of the button by performing the specific action.
- Button variations: This component is used to specify the different variations that can be used with the button.
- Icon Buttons: This component is used to demonstrate the button with different icons.
- Button with counts: This component is used to indicate or display the count, in order to notify with the button.
- Button groups: The component displays a series of buttons having different sizes, colors, & other similar variations.
Syntax:
<button class="class-name">....</button>
Example 1: This example describes the Primer CSS Buttons by specifying the different button actions.
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" />
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Primer CSS Button</h3>
<br>
<button class="btn btn-primary" type="button">
Primary
</button>
<button class="btn" type="button">
Default
</button>
<button class="btn btn-outline" type="button">
Outline
</button>
<button class="btn btn-danger" type="button">
Danger
</button>
</center>
</body>
</html>
|
Output:
Example 2: This example describes the Primer CSS Button by specifying the different counts with different button types.
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" />
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>Primer CSS Button</h3>
<br>
<button class="btn btn-danger mr-2" type="button"> New Notification
<span class="Counter">12</span>
</button>
<button class="btn btn-outline mr-2" type="button"> Pending
<span class="Counter">6</span>
</button>
<button class="btn btn-primary mr-2" type="button"> Completed
<span class="Counter">15</span>
</button>
</center>
</body>
</html>
|
Output:
Reference: https://primer.style/css/components/buttons