pure-css
  1. pure-css-buttons
PreviousNext

Pure CSS Buttons

  • Pure CSS provides a variety of button styles that can be easily incorporated into your website or application design.
  • These buttons are simple and minimalistic, yet can add an elegant touch to your interface.

Use

Pure CSS buttons are perfect for creating clear and concise calls-to-action on your website or application. They are lightweight and customizable, making them a great option for designers who want to add functionality without sacrificing style.

Advantage

One of the main advantages of using Pure CSS buttons is that they are lightweight and can be easily customized to fit the look and feel of your website or application. They can also be more accessible than other button styles, as they don't rely on images or JavaScript to function.

Example

Here is an example of using Pure CSS buttons to create a simple call-to-action section on a website.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Pure CSS Buttons Example</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    <body>
        <div class="button-wrapper">
            <h2>Ready to get started?</h2>
            <a href="#" class="pure-button pure-button-primary">Sign Up Today</a>
        </div>
    </body>
</html>
Try Playground

Colors

It is very easy to customize a pure button because Pure.CSS needs minimal styleing.

<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>
Try Playground

Size

Let's take an example to see all buttons in Pure.CSS.

<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>
Try Playground

Button with Icons

Pure doesn't come with icon fonts, but we can use icon fonts with Pure Buttons.

<button class="pure-button">
    <i class="fa fa-cog"></i>
    Settings
</button>

<a class="pure-button" href="#">
    <i class="fa fa-shopping-cart fa-lg"></i>
    Checkout
</a>
Try Playground

Summary

Pure CSS buttons are a simple yet effective way to add calls-to-action to your website or application. They are lightweight, customizable, and accessible, making them a great choice for designers who value both functionality and style. Experiment with different button styles and see how they can enhance your design!

Responsive DesignImages
Published on: