- Buttons are clickable elements that can perform different actions.
- Buttons can be styled with a variety of CSS properties.
- These include color, border, size, hover style, and more.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.my-button {
background: indigo;
border: 0;
color: white;
padding: 15px;
border-radius: 20px;
transition: 0.4s ease;
}
.my-button:hover {
background: black;
cursor: pointer;
}
</style>
</head>
<body>
<button class="my-button"
onclick="alert('Hi there!')">
Styled Button
</button>
</body>
</html>
The background-color property sets the background color of the button.
The color property sets the text color of the button.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.btn-style {
border: none;
color: white;
width: 120px;
padding: 20px;
font-size: 16px;
}
</style>
</head>
<body>
<button class="btn-style"
onclick="alert('Indianred')"
style="background-color: indianred;">
indianred
</button>
<button class="btn-style"
onclick="alert('Indigo')"
style="background-color: indigo">
indigo
</button>
<button class="btn-style"
onclick="alert('Darkgreen')"
style="background-color: darkgreen">
darkgreen
</button>
</body>
</html>
Button Sizes
The width and height properties directly assign button sizes.
The padding property also affects the button size.
Finally, the font-size property also affects the size.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.btn-sizes {
border: none;
color: white;
background-color: steelblue !important;
}
</style>
</head>
<body>
<button class="btn-sizes"
style="width:180px; height: 80px">
width/height
</button>
<button class="btn-sizes"
style="width:150px; height: 60px">
width/height
</button>
<button class="btn-sizes"
style="width:120px; height: 40px">
width/height
</button>
<br />
<br />
<button class="btn-sizes"
style="padding:50px;">
padding
</button>
<button class="btn-sizes"
style="padding:30px;">
padding
</button>
<button class="btn-sizes"
style="padding:10px;">
padding
</button>
<br />
<br />
<button class="btn-sizes"
style="font-size: 36px;">
font-size
</button>
<button class="btn-sizes"
style="font-size: 26px;">
font-size
</button>
<button class="btn-sizes"
style="font-size: 16px;">
font-size
</button>
</body>
</html>
Rounded Buttons
The border-radius property adds rounded corners to a button.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.btn-round {
border: none;
padding: 20px;
width: 100px;
color: white;
background-color: steelblue;
}
</style>
</head>
<body>
<button class="btn-round"
style="border-radius: 5px">
5px
</button>
<button class="btn-round"
style="border-radius: 25px">
25px
</button>
<button class="btn-round"
style="border-radius: 50%">
50%
</button>
</body>
</html>
The border property adds a styled border to a button.
The value accepts a border width, a border style, and a border color.
Three buttons with different borders.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.btn-borders {
background-color: transparent;
padding: 20px;
font-size: 16px;
}
</style>
</head>
<body>
<button class="btn-borders"
style="border: 2px dotted black;">
2px dotted black
</button>
<button class="btn-borders"
style="border: 3px dashed orange;">
4px dashed orange
</button>
<button class="btn-borders"
style="border: 6px solid lightblue;">
6px solid lightblue
</button>
</body>
</html>
Button Shadows
The box-shadow property adds a shadow to a button.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.btn-shadow {
background-color: steelblue;
border: none;
color: white;
padding: 15px 30px;
font-size: 16px;
transition: 0.25s ease;
box-shadow: 3px 3px 5px #aaa;
}
.btn-shadow:hover {
box-shadow: 5px 5px 10px #aaa;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn-shadow">Shadow Button</button>
</body>
</html>
Disabled Buttons
Buttons can be disabled with the HTML disabled attribute.
The opacity property can give a disabled appearance.
The cursor : not allowed can be used to prevent the button from being clicked.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.btn-normal {
padding: 15px 30px;
background-color: #302ea3;
border: none;
color: white;
font-size: 16px;
}
.btn-normal:disabled {
opacity: 0.6;
cursor: not-allowed;
}
</style>
</head>
<body>
<button class="btn-normal">Normal Button</button>
<button class="btn-normal" disabled>Disabled Button</button>
</body>
</html>
Button Width
By default, the width of the button is equal to the width of its content.
The width property can be used to adjust the button's width.
A width value expressed as % creates widely stretched buttons.
Three buttons with a width expressed as %.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.btn-width {
background-color: #302ea3;
border: none;
text-align: center;
color: #fff;
margin: 5px 0;
padding: 15px 30px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn-width" style="width: 25%">25%</button>
<br>
<button class="btn-width" style="width: 50%">50%</button>
<br>
<button class="btn-width" style="width: 100%">100%</button>
</body>
</html>
No comments:
Post a Comment