This code creates a hover effect to fill the background color from bottom to top. It utilizes CSS linear-gradient and transitions for animation. This method enhances user interaction by providing visual feedback on hover.
You can use this code in website buttons or any HTML element. It adds an engaging hover effect, enhancing user experience. This effect can make your website more visually appealing and interactive.
How to Fill Background Color Bottom to Top Using CSS
1. Start by creating the HTML structure for the element you want to apply the effect to. For example, you can use a <div> element with a class of “fill-bg” as shown below:
<div class="fill-bg"> Hover Me </div>
2. Next, define the basic styling for the element in your CSS file. This includes setting the width, color, font, padding, and other properties. Here’s an example of basic styling.
Similarly, use the linear-gradient property to define the gradient colors and background-size to control the gradient direction. Also, add a transition effect for smooth animation.
/* basic style*/
.fill-bg {
margin: 2em auto;
width: 100px;
color: white;
font-size: 14px;
box-sizing: border-box;
font-family: sans-serif;
text-align: center;
font-weight: bold;
text-transform: uppercase;
padding: 1em 0.5em;
cursor: pointer;
}
/*background style */
.fill-bg {
background: linear-gradient(#252525, #252525 50%, #2ecc71 50%, #2ecc71);
background-size: 100% 200%;
/*trasition effect for background*/
transition: background 1s;
}
Finally, add a hover effect to trigger the background color fill animation on hover. Adjust the background-position property to control the direction of the fill effect. Here’s the CSS code to achieve this:
.fill-bg:hover {
background-position: 100% 100%;
}
That’s all! hopefully, you have successfully created Fill Background Color Bottom To Top Css. If you have any questions or suggestions, feel free to comment below.
