CSS Button With Sliding Background Color

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:

Live Demo Click Here

As you can see, when you hover the button, the background color changes from white to red with a smooth sliding effect from the left to the right, And also a circle moves from left to the right. 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. Apply the following HTML code to where you want to display this button.

<a href="#" class="btn-slide" target="_blank">  <span class="circle"><i class="fa fa-rocket"></i></span>  <span class="title">Live Demo</span>  <span class="title-hover">Click Here</span></a>

Once you have your button in place, it’s time to set up the CSS. Place the below CSS code inside the style tag of your template.

.btn-slide {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #e73138;
    margin: 10px;
    transition: .5s;
}
.btn-slide:hover {
    background-color: #e73138;
}
.btn-slide:hover span.circle {
    left: 100%;
    margin-left: -45px;
    background-color: #fff;
    color: #e73138;
}
.btn-slide:hover span.title {
    left: 40px;
    opacity: 0;
}
.btn-slide:hover span.title-hover {
    opacity: 1;
    left: 40px;
}
.btn-slide span.circle {
    display: block;
    background-color: #e73138;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}
.btn-slide span.title,
  .btn-slide span.title-hover {
    position: absolute;
    left: 65px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-family:'Open Sans',sans-serif,Arial;
    font-weight: bold;
    color: #e73138;
    transition: .5s;
    text-transform:uppercase;
}
.btn-slide span.title-hover {
    left: 80px;
    opacity: 0;
}
.btn-slide span.title-hover {
    color: #fff;
}

You can change the highlighted codes (color, size, etc) with your own codes.

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 red background. The example is included again below

That's it! I hope you like this Button! Stay tuned for more cool Codes!