css Question posted in
Some basic documentation can be found here.

Css – How to add transition effects on Button

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;
}
Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0 
    // 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;
}
    Login or Signup to reply.
  3. 0 
    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search