Pure CSS – Buttons:
In this tutorial, we will learn about Pure CSS buttons. Pure CSS provided different types of buttons like Disabled, Active, Primary, etc. Now, let us understand each of those in brief.
First, let us go with default buttons which comes with a class name called ” pure-button” which can be added to either an anchor tag <a> or button tag <button>. Below is the example.
Example:
<html> <head> <title>Pure CSS Inputs</title> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css"> </head> <body> <a class="pure-button" href="#"> Default Button</a> <button class="pure-button"> Default Button</button> </body> </html>
Disabled Buttons:
We can disable the buttons using the class name “pure-button-disabled”. Otherwise, we can make use of an attribute “disabled”. Take a look at the below example.
Example:
<html> <head> <title>Pure CSS Inputs</title> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css"> </head> <body> <button class="pure-button pure-button-disabled">Disabled Button</button> <button class="pure-button" disabled>Disabled Button</button> </body> </html>
Active Buttons & Primary Buttons:
We can create the active and primary buttons by using the class names “pure-button-active” and “pure-button-primary”. Below is the example.
Example:
<html> <head> <title>Pure CSS Inputs</title> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css"> </head> <body> <a class="pure-button pure-button-active" href="#">Active Button</a> <button class="pure-button pure-button-active">Active Button</button> <a class="pure-button pure-button-primary" href="#">A Primary Button</a> <button class="pure-button pure-button-primary">A Primary Button</button> </body> </html>
Example for Sizing and Customizing Buttons:
<html>
<head>
<title>Pure CSS Inputs</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
<style>
.button-success,
.button-error,
.button-warning,
.button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65); /* this is a green */
}
.button-error {
background: rgb(202, 60, 60); /* this is a maroon */
}
.button-warning {
background: rgb(223, 117, 20); /* this is an orange */
}
.button-secondary {
background: rgb(66, 184, 221); /* this is a light blue */
}
.button-xsmall {
font-size: 70%;
}
.button-small {
font-size: 85%;
}
.button-large {
font-size: 110%;
}
.button-xlarge {
font-size: 125%;
}
</style>
</head>
<body>
<div>
<br><br>
<button class="button-success pure-button">Success Button</button>
<button class="button-error pure-button">Error Button</button>
<button class="button-warning pure-button">Warning Button</button>
<button class="button-secondary pure-button">Secondary Button</button>
<br><br>
<button class="button-xsmall pure-button">Extra Small Button</button>
<button class="button-small pure-button">Small Button</button>
<button class="pure-button">Regular Button</button>
<button class="button-large pure-button">Large Button</button>
<button class="button-xlarge pure-button">Extra Large Button</button>
</div>
</body>
</html>