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 ensures that our styles are consistent and interoperable with each other. It features a highly composable spacing scale, customizable typography, and meaningful colors. It is highly reusable and flexible and is created with GitHub’s design system.
A button is an important component in any website which is used for generating events whenever the user clicks the button. Primer CSS provides us with various types of buttons. This functionality is known as Button Types in Primer CSS.
Primer CSS Button Types Classes:
- btn: This class is used to create a simple button for general page actions. It is known as the default button.
- btn-primary: This class is used to create a primary button that is green in color and is used to indicate the primary action on a page.
- btn-outline: This class is used to create an outline button that downplays an action and appears like links.
- btn-danger: This class is used to create a danger button that is red in color.
Syntax:
<button class="btn btn-primary" type="button">
...
</button>
The syntax for the other classes is the same except for the name of the class which will change.
Example 1: The following example demonstrates the use of the btn and the btn-primary classes in order to create a default button and a primary button respectively.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Button Types </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="text-left">
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h3> Primer CSS Button Types </h3>
</div>
<br>
<!--Default Button-->
<button class="btn" type="button">
Default Button
</button>
<button class="btn" type="button">
Default Button 2
</button>
<!--Primary Button-->
<button class="btn btn-primary" type="button">
Primary Button
</button>
<button class="btn btn-primary" type="button">
Primary Button 2
</button>
</body>
</html>
Output:
Example 2: The following example demonstrates the use of the btn-outline and the btn-danger classes in order to create an outline button and a danger button respectively. When you hover on the online button or on the danger button, the entire button will become blue or red respectively.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Button Types </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="text-left">
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h3> Primer CSS Button Types </h3>
</div>
<br>
<!--Outline Button-->
<button class="btn btn-outline" type="button">
Outline Button
</button>
<button class="btn btn-outline" type="button">
Outline Button 2
</button>
<!--Danger Button-->
<button class="btn btn-danger" type="button">
Danger Button
</button>
<button class="btn btn-danger" type="button">
Danger Button 2
</button>
</body>
</html>
Output:
Reference: https://primer.style/css/components/buttons
Similar Reads
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 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. 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
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
Primer CSS Button Variations 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 per
2 min read