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 variations of buttons.
- Sizes: The button can be designed in different sizes using btn, btn-sm, and btn-large classes.
- Block button: The button can take up the full width by using the btn-block class.
- Link Button: The button can be designed to look like a link by using the btn-link class.
- Invisible Button: A link that acts as a button on hover by using the btn-invisible class.
- Hidden Button: The user can design a button to indicate hidden text by using the hidden-text-expander class.
Primer CSS button variations classes:
- btn: This class is used to set the default button.
- btn-sm: This class is used to set the small button.
- btn-large: This class is used to set the large button.
- btn-block: This class is used to set the button to full width.
- btn-link: This class is used to create a button with an easy access link.
- btn-invisible: This class is used to create a link that acts as a button.
- hidden-text-expander: This class is used to create a hidden text button.
Syntax:
<button class="btn" type="button"> Text to be shown... </button>
Example: This example demonstrates the different variations of Primer CSS buttons using the btn class.
HTML
<!DOCTYPE html> <html>
<head>
<title>Primer CSS Button Variations</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body style="margin:100px">
<div class="text-center">
<h1 class="color-fg-success">
GeeksforGeeks
</h1>
<h3><u>Primer CSS Button Variations</u></h3>
<br />
</div>
<div class="d-flex flex-justify-center">
<button class="btn-sm btn-link mr-4" type="button">
Small Link Button
</button>
<button class="btn mr-3" type="button">
Basic button
</button>
<button class="btn btn-large btn-outline" type="button">
Large Button
</button>
</div><br />
<div class="d-flex flex-justify-center">
<button class="btn btn-block" type="button">
Block Button
</button>
</div><br />
<h5 class="text-center">
<u>Hidden Text Button</u>
</h5>
<div class="d-flex flex-justify-center">
<span class="hidden-text-expander">
<button type="button" class="ellipsis-expander">....</button>
</span>
</div>
</body>
</html>
|
Output:
Button Variations
Reference link: https://primer.style/css/components/buttons#button-variations