Primer CSS Button Variations Last Updated : 20 Apr, 2022 Comments Improve Suggest changes Like Article Like Report 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 Comment More infoAdvertise with us Next Article Primer CSS Button Variations N namankedia Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Component 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 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 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 Semantic-UI Button Variations Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS and jQuery to incorporate in different frameworks. Semantic UI Button Group offers variation of button, there are Social b 4 min read Primer CSS Button with Icons 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 3 min read Like