CSS Transitions – Change background color with a smooth slide on hover

Web Design

26

Jun

As developers and designers begin to become a bit more comfortable with web design, often times they will want to start improving overall user experience by using techniques such as CSS transitions to animate different elements on the site based on interaction, for instance on hover. One trick that’s very easy to implement and almost always looks great on objects like buttons or navigation links is having the background color transition from one color to another with a horizontal wipe effect. To give you an idea of what I’m talking about, just hover the button below:

Click Here

As you can see, when you hover the button, the background color changes from white to black with a smooth sliding effect from the right to the left. Implementing this effect is fairly simple and only requires a couple of lines of code, the thing you want to primarily focus on is the timing and the colors to make sure the animation is clean and pleasing to the eye.

To start, you’ll need a button or navigation item set up. In this case we’ll set up a link button with a class called “the-button” on it, but can name this class whatever you would like.

<a class="the-button" href="your-link-here">My New Button</a>

Once you have your button in place, it’s time to set up the CSS. We will be using two things to build the base for the effect, linear gradient and transition, and then we will be ‘animating’ the background position to achieve the slide/swipe we’re looking for.

So to start, you’ll want to set up your new class and give it some basic styling. You can use our basic button code below or create your own:

.the-button{
  width: 200px;
  height: auto;
  overflow: hidden;
  display: block;
  text-align: center;
  padding: 10px 0;
  margin:0 auto;
  text-decoration: none;
  font-size: 14px;
  font-family: "Source Sans Pro", sans-serif;
  border: 1px solid #000;
  color:#000;
}

Now that we have a button in place, it’s time to create the two different background colors, the starting color and the color that will show on hover. To achieve this, we’re going to use ‘background-image’ ‘linear-gradient()’ where each color will be given 50% of the gradient. Then, we will set the background size to 200% width so that each color will actually take up 100% of our button’s width. Finally, we’re going to set the background position to “bottom left” so that the background will start on the left hand side, ensuring the white part of our gradient will fill the entire button.

.the-button{
  width: 200px;
  height: auto;
  overflow: hidden;
  display: block;
  text-align: center;
  padding: 10px 0;
  margin:0 auto;
  text-decoration: none;
  font-size: 14px;
  font-family: "Source Sans Pro", sans-serif;
  border: 1px solid #000;
  color:#000;
  /** START THE GRADIENT RULES **/
 background-image: linear-gradient(to right, #fff 50%, #000 50%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

If you were to preview your button as it is currently, it would just look like a plain white button with a black border and black text, so now it’s time to add in the transitions based on the hovering of our button. To do this, we’ll need to add transition rules to both the ‘the-button’ class, but we’ll also need to create a ‘the-button:hover’ pseudo-class and add the transition rules to this as well.

.the-button{
  width: 200px;
  height: auto;
  overflow: hidden;
  display: block;
  text-align: center;
  padding: 10px 0;
  margin:0 auto;
  text-decoration: none;
  font-size: 14px;
  font-family: "Source Sans Pro", sans-serif;
  border: 1px solid #000;
  color:#000;
  background-image: linear-gradient(to right, #fff 50%, #000 50%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
  /** START THE TRANSITION RULES **/
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}

.the-button:hover {
   /** START THE TRANSITION RULES **/
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}

Now that the button is all set up and ready for transitions and the hover pseudo-class is also set up with transitions, all that needs to be done is to add the rules for the final state to the hover pseudo-class. In this example, we’re going to want to change the font color from black at it’s initial state to white, so that the text will still show on the black background after transition. We’ll also want to make sure our background changes to black from white, which we will achieve by animating the background position from ‘bottom left’ to ‘bottom right’.

.the-button{
  width: 200px;
  height: auto;
  overflow: hidden;
  display: block;
  text-align: center;
  padding: 10px 0;
  margin:0 auto;
  text-decoration: none;
  font-size: 14px;
  font-family: "Source Sans Pro", sans-serif;
  border: 1px solid #000;
  color:#000;
  background-image: linear-gradient(to right, #fff 50%, #000 50%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}

.the-button:hover {
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
  /** START THE FINAL STATE STYLING **/
  background-position: bottom right;
  color: #fff;
}

So now if you’ve followed all of the instructions, you should have a simple link button element that uses a linear gradient to create a clean CSS transition from a white background to a black background. The example is included again below

Click Here

Web Design

CALL US NOW