Buttons serve to be an important component of web pages as they help improve the overall user experience. So it is quite important to learn how to customize them according to our requirements. Pure CSS helps us create buttons on the go.
We can use the following 3 properties to style our button. Some basic properties of buttons eg. hover, are already styled by the pure-button class:
- border-radius: The border-radius property allows us to round the corners of our element. It is a short-hand/combination for border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.
- background-color: The background-color property allows us to change the color of the button to green. We can specify the color using HEX, HSL, RGB, RGBA, or HSLA values.
- color: The color property allows us to change the color of the text inside the button. Similar to background-color we can specify the color using HEX, HSL, RGB, RGBA, or HSLA values.
Syntax: We can create a simple button using the pure-button class of pure CSS.
<a class="pure-button"> CLICK ME </a>
Next, we will group our custom CSS styles in a user-defined class and then add that class to the element having a pure-button class.
Note: Do not forget to add the pure CSS CDN to be able to use the pure CSS framework
Example 1: Let us suppose we want to create a green button with rounded corners for our welcome page.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous" />
<!-- Internal CSS -->
<style>
/*styles for the body and h1*/
body {
text-align: center;
padding: 12%;
font-family: sans-serif;
font-size: 2rem;
}
h1 {
color: #2f8d46;
}
/*styles for button*/
.button_go {
background-color: #2f8d46;
color: #ffffff;
border-radius: 40px;
}
</style>
<title>Welcome!</title>
</head>
<body>
<h1>Hello Geeks!!!</h1>
<p>Click the button bellow to begin your learning.</p>
<a href=
CLICK ME
</a>
</body>
</html>
|
Output:
welcome-page in browser
Example 2: We can also create buttons of different shapes using the border-radius property.
<!DOCTYPE html> <html>
<head>
<!--pure CSS CDN-->
<link rel="stylesheet" href=
integrity=
"sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous" />
<!--Internal CSS-->
<style>
body {
padding: 20%;
}
.button1 {
background-color: #F5360D;
color: #ffffff;
}
.button2 {
background-color: #F5A40D;
color: #ffffff;
border-radius: 15px;
}
.button3 {
background-color: #47E307;
color: #ffffff;
border-radius: 15px 0 15px;
}
.button4 {
background-color: #0772E3;
color: #ffffff;
border-radius: 50%;
}
</style>
<title>Buttons</title>
</head>
<body>
<button class="pure-button button1">button1</button>
<button class="pure-button button2">button2</button>
<button class="pure-button button3">button3</button>
<button class="pure-button button4">button4</button>
</body>
</html>
|
Output:
buttons with different border-radius
Note: It is always advisable to use Html only for structuring and not for styling. Therefore, it is good practice to use external CSS for styling.