Pure CSS Buttons
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. We can create different types of buttons with the help of Pure CSS.
Pure CSS Buttons Classes:
- Default Buttons
- Disabled buttons
- Primary buttons
- Active buttons
- Customizing buttons
Default Buttons: Add the “pure-button” class name to any <a> or <button> element to create a default button.
Syntax:
// Link Button <a class="pure-button" href="#"> Pure Button1 </a> // Normal Button <button class="pure-button"> Pure Button2 </button>
Example:
HTML
<!DOCTYPE html><html><head> <!--Import Pure Css files--> <link rel="stylesheet" href= integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"/></head> <body style="text-align: center"> <!--Default buttons--> <strong>Pure CSS Default Buttons</strong> <br><br> <!-- Link Button --> <a class="pure-button" href="#">Pure Button1</a> <!-- Normal Button --> <button class="pure-button">Pure Button2</button></body></html> |
Output:
Disabled Buttons: To mark a button as disabled add “pure-button-disabled” with class pure-button. You can also use the disabled attribute directly.
Syntax:
<button class="pure-button pure-button-disabled"> Disabled Button1 </button> <button class="pure-button" disabled> Disabled Button2 </button>
Example:
HTML
<!DOCTYPE html><html><head> <!--Import Pure Css files--> <link rel="stylesheet" href= integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"/></head> <body style="text-align: center"> <!--Default buttons--> <strong>Pure CSS Disabled Buttons</strong> <br><br> <!-- Link Button --> <a class="pure-button pure-button-disabled" href="#"> Button Disabled </a> <!-- Normal Button --> <button class="pure-button" disabled=""> Button Disabled </button></body></html> |
Output:
Active Buttons: To create a button so that it appears “pressed” , you can add “pure-button-active” class along with pure-button to any <a> or <button> element.
Syntax:
<a class="pure-button pure-button-active" href="#"> Active Button1 </a> <button class="pure-button pure-button-active"> Active Button2 </button>
Example:
HTML
<!DOCTYPE html><html><head> <!--Import Pure Css files--> <link rel="stylesheet" href= integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"/></head> <body style="text-align: center"> <!--Default buttons--> <strong>Pure CSS Active Buttons</strong> <br><br> <!-- Link Button --> <a class="pure-button pure-button-active" href="#"> Active Button1 </a> <!-- Normal Button --> <button class="pure-button pure-button-active"> Active Button2 </button></body></html> |
Output:
Primary Buttons: To indicate that a button represents primary action add “pure-button-primary” class alongside pure-button.
Syntax:
<a class="pure-button pure-button-primary" href="#"> Primary Button1 </a> <button class="pure-button pure-button-primary"> Primary Button2 </button>
Example:
HTML
<!DOCTYPE html><html><head> <!--Import Pure Css files--> <link rel="stylesheet" href= integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"/></head> <body style="text-align: center"> <!--Default buttons--> <strong>Pure CSS Primary Buttons</strong> <br><br> <!-- Link Button --> <a class="pure-button pure-button-primary" href="#"> Primary Button1 </a> <!-- Normal Button --> <button class="pure-button pure-button-primary"> Primary Button2 </button></body></html> |
Output:
Customized Buttons: With the help of Pure CSS it is easy to customize buttons for your own application because of its minimal styling. Group your custom CSS into a class such as button-success, which you can then add to an element that already has a pure-button class.
Note: Here we can customize our buttons according to our need, by using manual CSS.
Example:
HTML
<!DOCTYPE html><html><head> <!--Import Pure Css files--> <link rel="stylesheet" href= integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"/> <style> /* Styling for Customized Buttons */ .button-success, .button-error, .button-warning, .button-secondary { color: white; border-radius: 15px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success { background: rgb(28, 184, 65); } .button-error { background: rgb(202, 60, 60); } .button-warning { background: rgb(223, 117, 20); } .button-secondary { background: rgb(66, 184, 221); } </style></head> <body style="text-align: center"> <!--Customized buttons--> <strong>Pure CSS Customized Buttons </strong> <br /><br /> <button class="button-success pure-button"> Success Button </button> <button class="button-secondary pure-button"> Secondary Button </button> <button class="button-warning pure-button"> Warning Button </button> <button class="button-error pure-button"> Error Button </button> </body></html> |
Output:
Buttons with different sizes: Here we can set the size of the button according to our need.
- Extra small button: Add “button-xsmall” class alongside pure-button.
- Small button: Add “button-small” class alongside pure-button.
- Regular button: Add only “pure-button” class.
- Large button: Add “button-large” class alongside pure-button.
- Extra large button: Add “button-xlarge” class alongside pure-button.
Note: Here we can resize our buttons according to our need, by using manual CSS.
Example:
HTML
<!DOCTYPE html><html><head> <!--Import Pure Css files--> <link rel="stylesheet" href= integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"/> <style> /* Styling for font-size in buttons */ .button-xsmall { font-size: 70%; } .button-small { font-size: 85%; } .button-large { font-size: 110%; } .button-xlarge { font-size: 125%; } </style></head> <body style="text-align: center"> <!--Customized buttons--> <strong> Pure CSS Buttons with different Sizes </strong> <br /><br /> <button class="button-small pure-button"> Small Button </button> <button class="pure-button"> Normal Button </button> <button class="button-large pure-button"> large Button </button> <button class="button-xlarge pure-button"> xlarge Button </button> </body></html> |
Output:
Reference:https://purecss.io/buttons/
Please Login to comment...