Pure CSS Colored buttons with rounded corners
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.
Example 2: We can also create buttons of different shapes using the border-radius property.
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.
Please Login to comment...