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> 