Creating an animated icon button in HTML can be done using a combination of HTML and CSS. Here's a simple example of an animated icon button that changes its appearance when hovered over.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Icon Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="button-container">
<button class="icon-button">
<i class="icon">🎉</i>
<span class="button-text">Celebrate</span>
</button>
</div>
</body>
</html>
-----------------------------
CSS (styles.css)
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #f0f0f0;
font-family: Arial, sans-serif;
}
.button-container {
display: flex;
justify-content: center;
align-items: center;
}
.icon-button {
display: flex;
align-items: center;
padding: 10px 20px;
background-color: #6200ea;
border: none;
border-radius: 5px;
color: white;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
outline: none;
}
.icon-button .icon {
margin-right: 10px;
transition: transform 0.3s;
}
.icon-button:hover {
background-color: #3700b3;
transform: scale(1.05);
}
.icon-button:hover .icon {
transform: rotate(360deg);
}
--------------------------------------------
Explanation
HTML:
- A button element with an icon and text inside a container.
- The icon here is represented by a Unicode emoji (🎉), but you could replace it with an SVG or FontAwesome icon.
CSS:
- Styles the body to center the button on the page.
- Styles the button with padding, background color, border-radius, and transitions for smooth animations.
- When the button is hovered over, it changes its background color and scales up slightly.
- The icon inside the button rotates 360 degrees on hover.
Enhancements
You can enhance this further by using SVG icons or integrating with icon libraries like Font Awesome. Here's an example with Font Awesome:
0 Comments