Padding property
The padding property is used to set the padding in the button.
Syntax:
element {
padding: style;
}
Example: To demonstrate applying the padding property to the Button in CSS.
<!DOCTYPE html>
<html>
<head>
<title>HTML button tag </title>
<style>
h1 {
color: green;
text-align: center;
}
.button {
border: none;
color: white;
border-radius: 8px;
text-align: center;
padding: 20px;
cursor: pointer;
font-size: 20px;
}
.b1 {
background-color: red;
padding: 15px 32px;
}
.b2 {
background-color: blue;
padding: 24px 50px;
}
.b3 {
background-color: green;
padding: 32px 32px;
}
.b4 {
background-color: yellow;
padding: 16px;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h2>HTML <button> tag</h2>
<div class="btn">
<button class="button b1">Red</button>
<button class="button b2">Blue</button>
<button class="button b3">Green</button>
<button class="button b4">Yellow</button>
</div>
</body>
</html>
Output:
CSS Buttons
CSS buttons enhance webpage aesthetics by applying various styling properties. They facilitate event processing and user interaction, from form submission to accessing information. HTML`<button>` tag is used to create buttons.
Table of Content
- Background-colour property
- Border property
- Color property
- Padding property
- Font-size property
- Border-radius property
- Box-shadow property
- Width property
- Hover Effects property
- Animated , Disabled, Fade in effects
- Supported Browsers:
Example: To demonstrate the implementation of the many buttons functionality with its multiple attributes.
<!DOCTYPE html>
<html>
<head>
<title> HTML <button> tag</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h2><button> tag</h2>
<button>Button</button>
</body>
</html>
Output:
There are many CSS properties used to style the button element which are as follows: