Pure CSS Customizing Buttons
Last Updated :
11 Mar, 2022
Pure CSS is a CSS framework. It is a set of free and open-source tools for building responsive websites and web applications. Yahoo developed this, which is used to make websites that are quicker, more elegant, and more responsive. It can be used as an alternative to Bootstrap.
The Customizing Buttons facilitates customizing the button styles such as color, shape, size, and icons, by grouping the custom CSS into a class, that helps to implement it to an element containing the class name.
Pure CSS Customizing Buttons Class:
- pure-button: The pure-button class is used to create a pure button with normal & regular-size buttons.
- button-xsmall: This class is used to create extra small buttons.
- button-small: This class is used to create small buttons.
- button-large: This class is used to create large buttons.
- button-xlarge: This class is used to create extra-large buttons.
Syntax:
<button class="Customizing Buttons Class"> Content </button>
Example1: In this example, we will demonstrate Pure CSS Customizing Colored Buttons.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous" />
<style>
.button-success {
background: rgb(27, 240, 76);
}
.button-error {
background: rgb(252, 16, 16);
}
.button-warning {
background: rgb(245, 128, 18);
}
.button-download {
background: rgb(66, 184, 221);
}
</style>
</head>
<body style="text-align: center">
<h2 style="color:green">GeeksforGeeks</h2>
<strong>Pure CSS Customizing Coloured Buttons </strong>
<br />
<button class="button-success pure-button">
Success Button
</button>
<button class="button-warning pure-button">
Warning Button
</button>
<button class="button-download pure-button">
Download Button
</button>
<button class="button-error pure-button">
Error Button
</button>
</body>
</html>
|
Output:
Example 2: In this example, we will demonstrate Pure CSS Customizing Colored Buttons with rounded corners.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Pure CSS Customizing Buttons</title>
<link rel="stylesheet"
href=
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous" />
<style>
.button-success,
.button-error,
.button-warning,
.button-download {
color: white;
border-radius: 15px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(27, 240, 76);
}
.button-error {
background: rgb(252, 16, 16);
}
.button-warning {
background: rgb(245, 128, 18);
}
.button-download {
background: rgb(66, 184, 221);
}
</style>
</head>
<body style="text-align: center">
<h2 style="color:green">GeeksforGeeks</h2>
<strong>
Pure CSS Customizing Coloured Buttons with rounded corner
</strong>
<br />
<br />
<button class="button-success pure-button">
Success Button
</button>
<button class="button-warning pure-button">
Warning Button
</button>
<button class="button-download pure-button">
Download Button
</button>
<button class="button-error pure-button">
Error Button
</button>
</body>
</html>
|
Output:
Example 3: In this example, we will demonstrate Pure CSS Customizing Buttons with different button sizes.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Pure CSS Customizing Buttons</title>
<link rel="stylesheet"
href=
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous" />
<style scoped="">
.button-xsmall {
font-size: 70%;
}
.button-small {
font-size: 85%;
}
.button-large {
font-size: 110%;
}
.button-xlarge {
font-size: 125%;
}
</style>
</head>
<body style="text-align: center">
<h2 style="color:green">GeeksforGeeks</h2>
<strong>
Pure CSS Customizing Buttons with different sizes
</strong>
<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>
</body>
</html>
|
Output:
Example 4: In this example, we will demonstrate Pure Customizing CSS Buttons with button icons.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Pure CSS Customizing Buttons</title>
<link rel="stylesheet"
href=
<link rel="stylesheet" href=
integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
crossorigin="anonymous" />
</head>
<body style="text-align: center">
<h2 style="color:green">GeeksforGeeks</h2>
<strong>Pure CSS Customizing Buttons with icons</strong>
<br />
<button class="pure-button" href="#">
<i class="fa fa-github" aria-hidden="true"></i>github
</button>
<button class="pure-button" href="#">
<i class="fa fa-bluetooth" aria-hidden="true"></i>bluetooth
</button>
<button class="pure-button" href="#">
<i class="fa fa-home" aria-hidden="true"></i>home
</button>
</body>
</html>
|
Output:
Reference: https://purecss.io/buttons/#customizing-buttons
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...