“`html
.send-button {
background-color: #0056b3;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.send-button:hover {
background-color: #003366;
}
.button-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.button-animation {
animation: pulse 1s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
“`
In this HTML code, we have created a simple “Send” button with a hover effect and an animation using CSS. When the user hovers over the button, its background color changes to a darker shade. Additionally, the button has a pulsating animation effect using keyframes to give it a dynamic and engaging appearance.
This HTML code can be enhanced further by adding functionality using JavaScript to handle the button click event and perform actions such as sending a message or submitting a form. By combining HTML, CSS, and JavaScript, we can create interactive and visually appealing UI components like the Send button animation.
🔥🔥🔥