To construct a button in HTML, we use the button tag. However, we may customize the buttons using CSS attributes. We can develop user interaction and event processing with the aid of buttons. They are one of the most often utilized components on websites.
Typically, buttons are used during form submission to see or obtain information.
CSS buttons serve to enhance the visual appeal of webpages by implementing various design features to the button. Buttons play a crucial role in handling events and engaging users. They are essential for accessing information and submitting forms. In HTML, buttons are generated using the button element.
HTML Button Creation Instructions
Use the <button> element to build a button.
This offers a more intuitive and meaningful option compared to a standard container utilizing the <div> tag.
<!DOCTYPE html>
<html>
<head>
<title>Button styling in CSS</title>
</head>
<body>
<button type="button">Submit</button>
</body>
</html>
Output
Use a Stylish Button
<!DOCTYPE html>
<html>
<head>
<title>Button styling in CSS</title>
<style>
button {
display: inline-block;
background-color: pink;
padding: 30px;
width: 400px;
color: black;
text-align: center;
}
</style>
</head>
<body>
<button type="button">click</button>
</body>
</html>
Output
The first styles we're adding are:
- Display: inline-block to allow us to increase the button's width and height.
- Background-color: The background color is pink. Adding a fancy background color.
- Padding: button padding of 30px gives our button a little more space on all four sides.
- Width: 400 pixels gives a 400-pixel width.
- text-align: center; puts our text in the center;
- Color: black makes our click text black
We will now employ the border attribute to round the edges of our elements. Additionally, we will increase the font size of our text. Add the lines below to the existing code:
<!DOCTYPE html>
<html>
<head>
<title>Button styling in CSS</title>
<style>
button {
display: inline-block;
background-color: lightblue;
padding: 50px;
width: 400px;
color: black;
text-align: center;
border: 5px double black;
border-radius: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<button type="button">click</button>
</body>
</html>
Output
To enable the hand icon when hovering over the button, we can include cursor: pointer in the CSS styling and introduce a 7-pixel margin, like this:
<!DOCTYPE html>
<html>
<head>
<title>Button styling in CSS</title>
<style>
button {
display: inline-block;
background-color: lightblue;
padding: 50px;
width: 400px;
color: black;
text-align: center;
border: 5px double black;
border-radius: 20px;
font-size: 30px;
cursor: pointer;
margin: 19px;
}
</style>
</head>
<body>
<button type="button">click</button>
</body>
</html>
Output
We need to take note of a small difference in this scenario. When hovering the mouse over the clickable text in the previous instance, the cursor will switch to a hand icon. However, once the cursor is moved towards it, the entire button will transition into a hand icon!
Style of Hover State
Styling the hover state is essential in providing users with visual cues when the button's status transitions.
<!DOCTYPE html>
<html>
<head>
<title>Button styling in CSS</title>
<style>
button:hover {
background-color: red;
}
button{
display: inline-block;
background-color: lightblue;
padding: 50px;
width: 400px;
color: black;
text-align: center;
border: 5px double black;
border-radius: 20px;
font-size: 30px;
cursor: pointer;
margin: 19px;
}
</style>
</head>
<body>
<button type="button">click</button>
</body>
</html>
Output
The color shifts to red when the cursor hovers over the click button. The transition of the hover effect's hue occurs rapidly and could be enhanced for a smoother experience.
Let's incorporate a transition at this point, ensuring it is applied within the button component instead of solely in the hover state.
Basic Button Styling
The button component can be customized using a range of CSS properties, a selection of which is explained in this section.
The button's background color can be modified by utilizing the background-color property.
Syntax:
element {
background-color: color_name;
}
In this instance, the button is styled with a background color using a fundamental style attribute.
<!DOCTYPE html>
<html>
<head>
<title>Background Color of a button</title>
<style>
.button {
border: 10px black;
color: black;
text-align: center;
font-size: 40px;
}
.b1 {
background-color: red;
}
.b2 {
background-color: green;
}
.b3 {
background-color: blue;
}
.b4 {
background-color: yellow;
}
</style>
</head>
<body>
<button class="button b1">Red</button>
<button class="button b2">Green</button>
<button class="button b3">Blue</button>
<button class="button b4">Yellow</button>
</body>
</html>
Output
Sizes of Buttons
To adjust the font size of a button, utilize the font-size attribute:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: pink;
border: none;
color: black;
padding: 20px 30px;
text-align: center;
display: inline-block;
margin: 5px 7px;
cursor: pointer;
}
.button1 {font-size: 16px;}
.button2 {font-size: 18px;}
.button3 {font-size: 20px;}
.button4 {font-size: 22px;}
.button5 {font-size: 24px;}
</style>
</head>
<body>
<h2>Button Sizes</h2>
<p>Altering the font size of a button by using font-size property:</p>
<button class="button button1">16px</button>
<button class="button button2">18px</button>
<button class="button button3">20px</button>
<button class="button button4">22px</button>
<button class="button button5">24px</button>
</body>
</html>
Output