Advertisement

Advertisement


Pure CSS Buttons

Buttons are very essential and are used often. Pure CSS has a very beautiful and responsive CSS for customizing the appearance of a button. There are many types of buttons which one can add in their website.

These are the various types of buttons used in Pure :

  • Default Buttons
  • Disabled Buttons
  • Active Buttons
  • Primary Buttons
  • Customized Buttons

We will also see how to use different sizes of buttons and also using icons with them.


Pure.CSS Default Buttons

It is the most basic button in Pure, you can add it by using class pure-button in any <a> or <button> tag. Look below to see the syntax to use the buttons within the webpage and also see a full example in the try-it editor to understand it properly.

<a class="pure-button" href="#"> A Pure Button </a>
<button class="pure-button"> A Pure Button </button>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure.CSS Default button </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
<style>
div{
margin:10px;
}
</style>
</head>
<body>
<div>
<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button"> A Pure Button </button>
</div>
</body>
</html>

Output

Pure.CSS Default button
A Pure Button

Pure CSS Disabled Buttons

A disabled button is the one on which you wouldn't be able to click but it will be visible to the user. The class for this button is pure-button-disabled. This class will be used along with pure-button class to make a button as disabled. Remember to use both the classes, it's a predefined syntax, no need to think much about it.

Note: HTML's disabled attribute can also be used directly with the pure-button class to make it disable. Look below the syntax to make a button disabled by both ways-
<button class="pure-button pure-button-disabled"> A Disabled Button </a>
<button class="pure-button" disabled> A Disabled Button </button>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure.CSS Disabled button </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
<style>
div{
margin:10px;
}
</style>
</head>
<body>
<div>
<button class="pure-button pure-button-disabled"> A Disabled Button </button>
<button class="pure-button" disabled> A Disabled Button </button>
</div>
</body>
</html>

Output

Pure.CSS Disabled button

Pure CSS Active Button

An active button is another button but with a bit different property. Whenever a user clicks on this button it appears like it is 'pressed'. It's class is pure-button-active which is again used along with pure-button class.

Look below to see the syntax to add this button in the website-

<class="pure-button pure-button-active" href="#"> An Active Button </a>
<button class="pure-button pure-button-active"> An Active Button </button>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure.CSS Active button </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
<style>
div{
margin:10px;
}
</style>
</head>
<body>
<div>
<a class="pure-button pure-button-active" href="#"> Active Button </a>
<button class="pure-button pure-button-active"> Active Button </button>
</div>
</body>
</html>

Output

Pure.CSS Active button
Active Button

Pure.CSS Primary Button

A primary button will appear blue in color and it represents a primary action. It's class is pure-button-primary. Again, always use it with pure-button class.

Look below to see the syntax to add this button in the website-

<a class="pure-button pure-button-primary" href="#"> A Primary Button </a>
<button class="pure-button pure-button-primary"> A Primary Button </button>


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure.CSS Primary button </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
<style>
div{
margin:10px;
}
</style>
</head>
<body>
<div>
<a class="pure-button pure-button-primary" href="#"> A Primary Button </a>
<button class="pure-button pure-button-primary"> A Primary Button </button>
</div>
</body>
</html>

Output

Pure.CSS Primary button
A Primary Button

Pure.CSS Customized Button

Pure gives you option to customize the buttons for your website. It is very easy to customize a pure button. Just create a class of your own like button-foo and add the required CSS which you want to use in the button and then use this class along with the pure-button class.

Look at the example below where we have created different classes which will give different colors to the buttons. We have used those classes with button tag to create buttons. Have a look at it and customize it by using different CSS properties.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure.CSS Customized button </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
</head>
<style scoped>
.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 */
}
div{
margin:10px;
}
</style>
<body>
<div>
<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>
</div>
</body>
</html>

Output

Pure.CSS Customized button

Pure.CSS Button Size

You can also change the size of the buttons if you think that the default size is too large. It is part of the customization of buttons. Here also, we will make different classes for different sizes and will specify the size within them.

In the example below we have used sizes-

  • Extra Small Buttons
  • Small Buttons
  • Regular Buttons
  • Large Buttons
  • Extra Large Buttons
You can specify any size for any button. Try this example in the editor and use different sizes to see the result-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure.CSS Button Size</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
</head>
<style scoped>
.button-xsmall {
font-size: 70%;
}
.button-small {
font-size: 85%;
}
.button-large {
font-size: 110%;
}
.button-xlarge {
font-size: 125%;
}
div{
margin:10px;
}
</style>
<body>
<div>
<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>

Output

Pure.CSS Button Size

Buttons With Icons

Pure CSS gives the freedom of using different icons packages, we will use those in within the buttons to enhance their appearance.In the example below,The font-awesome package's icons are used as you can see the use of font awesom's CDN path. As we know, we have to use the icon's class within an <i> tag. Have a look at it and try to understand how to add icons with buttons.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure.CSS Button With Icons </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<style type="text/css">
div {
margin: 10px;
}
</style>
</head>
<body>
<div>
<button class="pure-button">
<i class="fab fa-google-plus-g fa-lg"></i> Google </button>
<a class="pure-button" href="#">
<i class="fab fa-facebook-square fa-lg"></i> Facebook </a>
<button class="pure-button">
<i class="fab fa-instagram fa-lg"></i> Instagram </button>
<a class="pure-button" href="#">
<i class="fab fa-youtube fa-lg"></i> Youtube </a>
<button class="pure-button">
<i class="fab fa-twitter fa-lg"></i> Twitter </button>
</div>
</body>
</html>

Output

Pure.CSS Button With Icons
Facebook Youtube









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.