Related Topics
HTML
Data Structure
CSS
<button class="my-button">Hover Me</button>
CSS:
.my-button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.my-button:hover {
background-color: #0056b3;
}
In the above example, we have a button with the class my-button. We apply basic styles to the button, including padding, background color, text color, border, border radius, and cursor.
To create the smooth hover effect, we use CSS transitions. The transition property is set on the .my-button class, specifying that the background-color property should transition smoothly over a duration of 0.3 seconds with an easing function of ease.
When the button is hovered over, the .my-button:hover selector is triggered, and we change the background-color property to a different shade of blue. The transition specified on the .my-button class ensures that the color change occurs smoothly and gradually.
When you implement this code, you’ll notice that when you hover over the button, the background color transitions smoothly from the initial blue to a darker shade of blue, creating a visually appealing hover effect.
Feel free to adjust the properties and values according to your project’s design requirements and customize the transition effect to match your desired outcome.
Popular Category
Topics for You
HTML
Data Structure
Go through our study material. Your Job is awaiting.