Pure CSS Buttons
Pure CSS buttons are used to interact with the different web components. There is the following type of buttons: default button, active button, disabled button, primary button, button group, etc.
Pure CSS: Default Button
To create a default button, add .pure-button class to the any <a> or <button> element base class.
General Syntax
<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>
Source Code
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<a class="pure-button" href="#">A Pure Button</a>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<button class="pure-button">A Pure Button</button>
</div>
</div>
Source Code : Output
Disabled Button
To create disabled button, add .pure-button-disabled & .pure-button class to the <button> or <a> element base class and also add the disabled attribute to the <button> or <a> element.
General Syntax
<button class="pure-button pure-button-disabled">A Disabled Button</button>
<button class="pure-button" disabled="">A Disabled Button</button>
Source Code
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<a class="pure-button pure-button-disabled" href="#">A Pure Button</a>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<button class="pure-button" disabled="">A Pure Button</button>
</div>
</div>
Source Code : Output
Active Buttons
To create an active button, simply add .pure-button-active class name along with .pure-button class to the <button> element base class.
General Syntax
<a class="pure-button pure-button-active" href="#">An Active Button</a>
<button class="pure-button pure-button-active">An Active Button</button>
Source Code
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2" style="text-align: center;">
<a class="pure-button pure-button-active" href="#">An Active Button </a>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<button class="pure-button pure-button-active">An Active Button</button>
</div>
</div>
Source Code : Output
Primary Buttons
Pure CSS primary button can be created by assigning .pure-button-primary class to the <button> having class .pure-button.
General Syntax
<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button>
Source Code
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<a class="pure-button pure-button-primary" href="#">A Primary Button</a>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<button class="pure-button pure-button-primary">A Primary Button</button>
</div>
</div>
Source Code : Output
Customized Buttons
To customize button styles, you should group your custom CSS into a class such as button-foo, which you can then add to an element that already has the pure-button class name.
General Syntax
<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>
Source Code
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<button class="button-success-pure pure-button">Success Button</button>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<button class="button-error-pure pure-button">Error Button</button>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<button class="button-warning-pure pure-button">Warning Button</button>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<button class="button-secondary-pure pure-button">Secondary Button</button>
</div>
</div>
Source Code : Output
Button Groups
Wrap all the button having class .pure-button to the container and assign it .pure-button-group class to the base element.
General Syntax
<div class="pure-button-group">
<button class="pure-button">A Pure Button</button>
<button class="pure-button">A Pure Button</button>
<button class="pure-button pure-button-active">A Pure Button</button>
</div>
Source Code
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1">
<div class="pure-button-group custom--alignment-btn" role="group">
<button class="pure-button">A Pure Button</button>
<button class="pure-button">A Pure Button</button>
<button class="pure-button pure-button-active">A Pure Button</button>
</div>
</div>
</div>
Source Code : Output
Button Different Sizes
Pure CSS button, different size can be created using custom CSS. Let, us take an example to understand it better.
General Syntax
<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>
Source Code
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<button class="button-success pure-button button-xsmall">Extra Small Button</button>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<button class="button-error pure-button button-small">Small Button</button>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<button class="button-warning pure-button button-large">Large Button</button>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<button class="button-secondary pure-button button-xlarge">Extra Large Button</button>
</div>
</div>
Source Code : Output
Web Tutorials
