Primer CSS Buttons Button Types
Last Updated :
08 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.
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.
In this article, we will learn about all the different types of buttons that are available in the Primer CSS.
Primer CSS provides us with various types of buttons for different scenarios. The button types can be added to the <button> element using the predefined classes. There are 4 types of buttons in Primer CSS.
Button Types classes:
- btn: The btn class is used to create a basic default button.
- btn-primary: The btn-primary class creates a green button showing the success of an event.
- btn-outline: The btn-outline class creates a button with an outline instead of background fill.
- btn-danger: The btn-danger class creates a red button that shows an error or failure of an event.
Syntax:
<button class="btn btn-primary">....</button>
Example 1: This demonstrates the different button types on the <button> element in Primer CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Primer CSS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" />
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Primer CSS Button Types</strong>
<br>
<button class="btn" type="button">Default</button>
<button class="btn btn-primary" type="button">Primary</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 demonstrates the different button types on the <a> element in Primer CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Primer CSS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" />
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Primer CSS Button Types</strong>
<br><br>
<a class="btn" type="button">Default anchor button</a>
<a class="btn btn-primary" type="button">Primary anchor button</a>
<a class="btn btn-outline" type="button">Outline anchor button</a>
<a class="btn btn-danger" type="button">Danger anchor button</a>
</center>
</body>
</html>
Output:
Reference: https://primer.style/css/components/buttons#button-types
Similar Reads
Primer CSS Button Types 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 a system that assists us to build consistent user experiences efficiently with enough flexibility. This systematic approach e
3 min read
Primer CSS Button with Counts 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
2 min read
Primer CSS Button States 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 a system that assists us to build consistent user experiences efficiently with enough flexibility. This systematic approach e
2 min read
Primer CSS Buttons 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
2 min read
Primer CSS Buttons 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
2 min read
Pure CSS Primary Buttons Buttons are one of the most common UI elements. It is used for users to interact with a system and take action by making selections. Pure CSS Primary Button is used to create a primary action button. The primary button is created using Pure CSS class. Pure CSS Primary Buttons Class: pure-button-prim
1 min read