Pure CSS Buttons Sizes

Buttons are one of the most common UI elements. They made it possible for users to interact with a system and take action by making selections. Sometimes we required different size buttons, there it comes, with the help of the Pure CSS Button Size class.

Pure CSS Button Sizes class: There is no predefined class for button size we have to do that by using CSS.

Button Size percentage depends on the parent: 

• button-xsmall: This class is used to create extra small buttons (70%).
• button-small: This class is used to create small buttons (85%).
• pure-button: This class is used to create normal buttons.
• button-large: This class is used to create large buttons (110%).
• button-xlarge: This class is used to create extra-large buttons (!25%).

Syntax:

<button class="button-xsmall pure-button">
 .....
</button>

Example: Below example illustrate the Pure CSS Button Sizes.

Output:

👁 Pure CSS Buttons sizes

Reference link: https://pure-css.github.io/