Pure CSS Buttons

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

Try it now

Source Code

Try it now

If you run the above source code then the output look like:

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

Try it now

Source Code

Try it now

If you run the above source code then the output look like:

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

Try it now

Source Code

Try it now

If you run the above source code then the output look like:

Primary Buttons

Pure CSS primary button can be created by assigning .pure-button-primary class to the <button> having class .pure-button.

General Syntax

Try it now

Source Code

Try it now

If you run the above source code then the output look like:

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

Try it now

Source Code

Try it now

If you run the above source code then the output look like:

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

Try it now

Source Code

Try it now

If you run the above source code then the output look like:

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

Try it now

Source Code

Try it now

If you run the above source code then the output look like: