I want to add transition effects on buttons. When I will hover over on any button its background color will be transform blue to white and text color white to blue. Background color must be change from left to write in sliding manners.
I tried the following code.
btn {
transition-property: background-color;
transition-duration: 0.5s;
}
btn:hover {
background-color: blue;
color: white;
}
Since you have shared minimal code from your end, is this something you are looking for?
In the following, we are using a horizontal linear gradient (to left) and then we are increasing the background size by 200%. On hover, we are trying to move the background position thus creating an effect of the button getting filled with another color. Feel free to change the color values as you prefer.
button {
padding: 10px 20px;
border-radius: 4px;
border: 2px solid black;
background-color: transparent;
background: linear-gradient(to left, white 50%, black 50%) right;
cursor: pointer;
background-size: 200%;
transition: 500ms ease-in;
}
button:hover {
color: white;
background-position: left;
}<button>
Hover Me
</button>
// if you are using class then add `.` before btn
btn NO! || .btn YES !! {
transition-property: background-color;
transition-duration: 0.5s;
}
btn:hover NO! || .btn:hover YES !! {
background-color: blue;
color: white;
}
There are several ways of doing this.
One way is to use background image (created with a linear-gradient) and start with it having a width of 0 and then on the hover making the width 100% and transitioning background-size.
<style>
.btn {
transition-property: background-size;
transition-duration: 0.5s;
color: blue;
background-image: linear-gradient(to right, blue, blue);
background-size: 0 100%;
background-repeat: no-repeat;
background-color: white;
}
.btn:hover {
color: white;
background-size: 100% 100%;
}
</style>
<button class="btn">Button</button>Note, I have assumed that you are using btn as a class and that the absence of a dot before btn in the stylesheet was just a typo.
You can add transition of any type by doing this.
.btn {
position: relative;
display: inline-block;
padding: 10px 20px; /* Adjust padding as needed */
color: blue; /* Initial text color */
background-color: white; /* Initial background color */
border: 2px solid blue; /* Border color */
text-align: center;
text-decoration: none;
overflow: hidden; /* Hide the overflow for the sliding effect */
transition: color 0.5s; /* Transition for text color */
}
.btn::before {
content: "";
position: absolute;
top: 0;
left: -100%; /* Start outside the button */
width: 100%;
height: 100%;
background-color: blue; /* Background color on hover */
transition: left 0.5s; /* Transition for the sliding effect */
z-index: 0; /* Place behind the text */
}
.btn:hover::before {
left: 0; /* Slide the blue background in */
}
.btn:hover {
color: white; /* Change text color on hover */
}
.btn span {
position: relative; /* Position the text above the background */
z-index: 1; /* Bring the text above the sliding background */
}<button class="btn"><span>Hover Me</span></button>