Button With Sliding Text Effect Using Simple CSS

dev5_admin

9 Dec 2025

Button With Sliding Text Effect Using Simple CSS

We will create a stylish button with a modern hover effect. The button text slides smoothly across the button when the user hovers over it. No JavaScript require, just a few lines of CSS.

Button Style

When user hover over the button, the text quickly fades out, slides left, and fades back in — creating a clean sliding animation.

Button HTML

Let us first create a simple html button. The <span> holds the text we want to animate.


<a href="#" class="button"><span>View All Services</span></a>

CSS Styles

Add below CSS codes. These CSS codes will creates the sliding effect to the button text.


.button {
  display: inline-block;
  background-color: #8a083e;
  color: #ffffff;
  padding: 10px 20px;
}
.button span {
  display: inline-block;
}
.button:hover span {
  animation: 0.4s buttonSlide ease;
}
@keyframes buttonSlide {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
   50% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

Demo

Demo - Button with sliding text effect