Animated , Disabled, Fade in effects
- Animated Button: Makes clicking a button more interesting by adding a gentle, animation.
- Disabled Button: Indicates a button that is temporarily inactive, or its action is not currently available.
- Fade-in Effect on Hover: The button changes colors smoothly when you hover over it, making it look polished and responsive.
Example: To demonstrate the implementation of above animated, disabled and fade-in effect on hover in CSS.
<!DOCTYPE html>
<html>
<head>
<title>HTML button tag</title>
<style>
h1 {
color: green;
}
button {
margin-top: 15px;
padding: 10px;
display: block;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
/* Disabled button styling */
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Animated button styling */
button.animated {
animation: pulse 1s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/* Fade-in effect on hover */
button:hover {
background-color: #2ecc71;
color: #fff;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h2>HTML <button> tag</h2>
<!-- Button with additional styles -->
<button>Button</button>
<!-- Disabled button -->
<button disabled>
Disabled Button
</button>
<!-- Animated button -->
<button class="animated">
Animated Button
</button>
</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: