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.
HTML
<!DOCTYPE html> <html>
<head>
<!--Import Pure Css files-->
<link rel="stylesheet"
href=
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"/>
<style>
.button-xsmall {
font-size: 70%;
}
.button-small {
font-size: 85%;
}
.button-large {
font-size: 110%;
}
.button-xlarge {
font-size: 125%;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<strong>Pure CSS Button Sizes</strong>
<br><br>
<button class="button-xsmall pure-button
button-">Pure Button2</button>
<button class="button-small pure-button
button-">Pure Button2</button>
<button class="pure-button
button-">Pure Button2</button>
<button class="button-large pure-button
button-">Pure Button2</button>
<button class="button-xlarge pure-button
button-">Pure Button2</button>
</center>
</body>
</html>
|
Output:
Pure CSS Buttons sizes
Reference link: https://purecss.io/buttons/