TDS CodeFx | CSS Slide Button Animation


<button class="slide-fill-left"><span>Get Started</span></button>


.slide-fill-left{
padding:15px 35px;
font-size:18px;
font-weight:bold;
color:#333;
background:#ffffff;
border:2px solid #ff0080;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:all 0.3s ease;
}

/* Gradient layer */
.slide-fill-left::before{
content:"";
position:absolute;
top:0;
right:0; /* Right side se start */
width:0%;
height:100%;
background:linear-gradient(90deg,#ff0080,#7928ca,#007bff);
z-index:0;
transition:width 0.4s ease;
}

/* Text above gradient */
.slide-fill-left span{
position:relative;
z-index:1;
}

/* Hover effect */
.slide-fill-left:hover::before{
width:100%; /* Leftward fill */
}

.slide-fill-left:hover{
color:#fff;
transform:scale(1.05);
}


<button class="slide-fill-right"><span>Get Started</span></button>


.slide-fill-right{
padding:15px 35px;
font-size:18px;
font-weight:bold;
color:#333;
background:#ffffff;
border:2px solid #ff0080;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:all 0.3s ease;
}

/* Gradient layer */
.slide-fill-right::before{
content:"";
position:absolute;
top:0;
left:0; /* Left side se start */
width:0%;
height:100%;
background:linear-gradient(90deg,#ff0080,#7928ca,#007bff);
z-index:0;
transition:width 0.4s ease;
}

/* Text above gradient */
.slide-fill-right span{
position:relative;
z-index:1;
}

/* Hover effect */
.slide-fill-right:hover::before{
width:100%; /* Rightward fill */
}

.slide-fill-right:hover{
color:#fff;
transform:scale(1.05);
}


<button class="slide-fill-top"><span>Get Started</span></button>


.slide-fill-top{
padding:15px 35px;
font-size:18px;
font-weight:bold;
color:#333;
background:#ffffff;
border:2px solid #ff0080;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:all 0.3s ease;
}

/* Gradient layer */
.slide-fill-top::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:0%; /* Start hidden */
background:linear-gradient(180deg,#ff0080,#7928ca,#007bff);
z-index:0;
transition:height 0.4s ease;
}

/* Text above gradient */
.slide-fill-top span{
position:relative;
z-index:1;
}

/* Hover effect */
.slide-fill-top:hover::before{
height:100%; /* Top → Bottom fill */
}

.slide-fill-top:hover{
color:#fff;
transform:scale(1.05);
}


<button class="slide-fill-bottom"><span>Get Started</span></button>


.slide-fill-bottom{
padding:15px 35px;
font-size:18px;
font-weight:bold;
color:#333;
background:#ffffff;
border:2px solid #ff0080;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:all 0.3s ease;
}

/* Gradient layer */
.slide-fill-bottom::before{
content:"";
position:absolute;
bottom:0; /* Bottom se start */
left:0;
width:100%;
height:0%; /* Hidden initially */
background:linear-gradient(180deg,#ff0080,#7928ca,#007bff);
z-index:0;
transition:height 0.4s ease;
}

/* Text above gradient */
.slide-fill-bottom span{
position:relative;
z-index:1;
}

/* Hover effect */
.slide-fill-bottom:hover::before{
height:100%; /* Bottom → Top fill */
}

.slide-fill-bottom:hover{
color:#fff;
transform:scale(1.05);
}


<button class="center-gradient-fill"><span>Get Started</span></button>


.center-gradient-fill{
padding:15px 40px;
font-size:18px;
font-weight:bold;
color:#333;
background:#ffffff;
border:2px solid #ff0080;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:all 0.3s ease;
}

/* Gradient layer */
.center-gradient-fill::before{
content:"";
position:absolute;
top:50%;
left:50%;
width:0%;
height:0%;
background:linear-gradient(135deg,#ff0080,#7928ca,#007bff);
z-index:0;
border-radius:50%;
transform:translate(-50%,-50%);
transition:all 0.5s ease;
}

/* Text above gradient */
.center-gradient-fill span{
position:relative;
z-index:1;
transition:color 0.3s ease;
}

/* Hover Effect */
.center-gradient-fill:hover::before{
width:300%;
height:300%; /* Center expand fill */
}

.center-gradient-fill:hover span{
color:#fff;
transform:scale(1.05);
}


<button class="slide-border-reveal"><span>Get Started</span></button>


.slide-border-reveal{
padding:15px 40px;
font-size:18px;
font-weight:bold;
color:#333;
background:#ffffff;
border:2px solid transparent; /* Initially transparent */
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:all 0.3s ease;
}

/* Horizontal Borders */
.slide-border-reveal::before,
.slide-border-reveal::after{
content:"";
position:absolute;
height:2px;
width:0%;
background:linear-gradient(90deg,#ff0080,#7928ca,#007bff);
top:0;
left:0;
transition:width 0.4s ease;
}

.slide-border-reveal::after{
top:auto;
bottom:0;
}

/* Vertical Borders */
.slide-border-reveal span::before,
.slide-border-reveal span::after{
content:"";
position:absolute;
width:2px;
height:0%;
background:linear-gradient(180deg,#ff0080,#7928ca,#007bff);
top:0;
left:0;
transition:height 0.4s ease;
}

.slide-border-reveal span::after{
left:auto;
right:0;
}

/* Positioning span pseudo elements */
.slide-border-reveal span{
position:relative;
display:inline-block;
}

/* Hover Effect */
.slide-border-reveal:hover::before,
.slide-border-reveal:hover::after{
width:100%; /* Horizontal borders expand */
}

.slide-border-reveal:hover span::before,
.slide-border-reveal:hover span::after{
height:100%; /* Vertical borders expand */
}

.slide-border-reveal:hover{
color:#fff;
transform:scale(1.05);
background:linear-gradient(90deg,#ff0080,#7928ca,#007bff); /* Optional fill */
}


<button class="slide-text-swap-improved">
  <span class="text">Get Started</span>
  <span class="hover-text">Go Now</span>
</button>


.slide-text-swap-improved{
padding:20px 60px; /* Bigger button */
font-size:16px; /* Slightly smaller text */
font-weight:600;
color:#fff;
background:#ff0080;
border:none;
border-radius:60px; /* More rounded */
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:all 0.3s ease;
min-width:200px; /* Ensures button width */
}

/* Base Text */
.slide-text-swap-improved .text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
transition:transform 0.4s ease, opacity 0.4s ease;
}

/* Hover Text */
.slide-text-swap-improved .hover-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,100%);
opacity:0;
transition:transform 0.4s ease, opacity 0.4s ease;
}

/* Hover Effect */
.slide-text-swap-improved:hover .text{
transform:translate(-50%,-150%);
opacity:0;
}

.slide-text-swap-improved:hover .hover-text{
transform:translate(-50%,-50%);
opacity:1;
}

/* Optional Gradient Border */
.slide-text-swap-improved::before{
content:"";
position:absolute;
inset:0;
border-radius:60px;
padding:3px; /* Slightly thicker border */
background:linear-gradient(90deg,#ff0080,#7928ca,#007bff);
-webkit-mask: 
  linear-gradient(#fff 0 0) content-box, 
  linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events:none;
}


<button class="slide-bg-sweep"><span>Get Started</span></button>


.slide-bg-sweep{
padding:15px 50px;
font-size:16px;
font-weight:600;
color:#fff;
background:#ff0080;
border:none;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:color 0.3s ease, transform 0.3s ease;
}

/* Gradient sweep layer */
.slide-bg-sweep::before{
content:"";
position:absolute;
top:0;
left:-100%; /* Start off left */
width:100%;
height:100%;
background:linear-gradient(120deg,#ff0080,#7928ca,#007bff);
z-index:0;
transition:all 0.5s ease;
transform:skewX(-20deg); /* Angled sweep */
}

/* Text above gradient */
.slide-bg-sweep span{
position:relative;
z-index:1;
transition:color 0.3s ease;
}

/* Hover Effect */
.slide-bg-sweep:hover::before{
left:0; /* Sweep across button */
}

.slide-bg-sweep:hover{
color:#fff;
transform:scale(1.05); /* Slight zoom */
}


<button class="slide-double-fill"><span>Get Started</span></button>


.slide-double-fill{
padding:15px 50px;
font-size:16px;
font-weight:600;
color:#ff0080;
background:#fff;
border:2px solid #ff0080;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:all 0.3s ease;
}

/* Left fill */
.slide-double-fill::before{
content:"";
position:absolute;
top:0;
left:-50%;
width:50%;
height:100%;
background:#ff0080;
transition:0.4s ease;
z-index:0;
}

/* Right fill */
.slide-double-fill::after{
content:"";
position:absolute;
top:0;
right:-50%;
width:50%;
height:100%;
background:#ff0080;
transition:0.4s ease;
z-index:0;
}

/* Text above layers */
.slide-double-fill span{
position:relative;
z-index:1;
}

/* Hover */
.slide-double-fill:hover::before{
left:0;
}

.slide-double-fill:hover::after{
right:0;
}

.slide-double-fill:hover{
color:#fff;
transform:scale(1.05);
}


<button class="slide-curtain"><span>Get Started</span></button>


.slide-curtain{
padding:15px 45px;
font-size:16px;
font-weight:600;
color:#fff;
background:#111;
border:none;
border-radius:50px;
cursor:pointer;
position:relative;
overflow:hidden;
}

.slide-curtain::before,
.slide-curtain::after{
content:"";
position:absolute;
top:0;
width:50%;
height:100%;
background:#ff0080;
transition:0.4s;
z-index:0;
}

.slide-curtain::before{ left:0; }
.slide-curtain::after{ right:0; }

.slide-curtain span{
position:relative;
z-index:1;
}

.slide-curtain:hover::before{
transform:translateX(-100%);
}

.slide-curtain:hover::after{
transform:translateX(100%);
}


<button class="slide-glow-button"><span>Get Started</span></button>


.slide-glow-button{
padding:15px 45px;
font-size:16px;
font-weight:600;
color:#fff;
background:#111;
border:none;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:all 0.3s ease;
}

/* Glow sliding layer */
.slide-glow-button::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(120deg,
transparent,
rgba(255,255,255,0.6),
transparent);
transition:0.6s;
}

/* Keep text above glow */
.slide-glow-button span{
position:relative;
z-index:1;
}

/* Hover */
.slide-glow-button:hover::before{
left:100%;
}

.slide-glow-button:hover{
box-shadow:0 0 15px #ff0080,
           0 0 30px #7928ca;
transform:scale(1.05);
}


<button class="slide-split-swap"><span>Get Started</span></button>


.slide-split-swap{
padding:15px 45px;
font-size:16px;
font-weight:600;
color:#fff;
background:#7928ca;
border:none;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:0.3s;
}

/* Top layer */
.slide-split-swap::before{
content:"";
position:absolute;
top:-100%;
left:0;
width:100%;
height:50%;
background:#ff0080;
transition:0.4s;
z-index:0;
}

/* Bottom layer */
.slide-split-swap::after{
content:"";
position:absolute;
bottom:-100%;
left:0;
width:100%;
height:50%;
background:#007bff;
transition:0.4s;
z-index:0;
}

/* Text above */
.slide-split-swap span{
position:relative;
z-index:1;
}

/* Hover */
.slide-split-swap:hover::before{
top:0;
}

.slide-split-swap:hover::after{
bottom:0;
}

.slide-split-swap:hover{
transform:scale(1.05);
}

<button class="morph-glow-button"><span>Get Started</span></button>


    .morph-glow-button {
    position: relative;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: bold;
    color: #007bff; /* Initial text color */ 
    background: transparent;
    border: 2px solid #007bff;
    border-radius: 50px;
    cursor: pointer; 
    overflow: hidden;
    transition: all 0.3s ease;
    }

/* Inner gradient slide */
.morph-glow-button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(120deg, rgba(0,123,255,0.2), rgba(0,123,255,0.6), rgba(0,123,255,0.2));
transition: all 0.5s ease;
z-index: 0;
}

/* Text span styling */
.morph-glow-button span {
position: relative;
z-index: 1;
transition: color 0.3s ease;
}

/* Hover: morph & glow */
.morph-glow-button:hover {
transform: scale(1.08) rotate(-1deg);
box-shadow: 0 0 20px 5px rgba(0,123,255,0.5);
}

/* Slide inner gradient on hover */
.morph-glow-button:hover::before {
left: 0;
}

/* Change text color on hover */
.morph-glow-button:hover span {
color: white;
}

/* Click / active animation */
.morph-glow-button:active {
transform: scale(0.95) rotate(0deg);
box-shadow: 0 0 25px 8px rgba(0,123,255,0.4);
transition: all 0.1s ease;
}


<button class="slide-diagonal-split"><span>Get Started</span></button>


.slide-diagonal-split{
padding:15px 45px;
font-size:16px;
font-weight:600;
color:#fff;
background:#111;
border:none;
border-radius:50px;
cursor:pointer;
outline:none;
position:relative;
overflow:hidden;
transition:0.3s;
}

/* First diagonal layer */
.slide-diagonal-split::before{
content:"";
position:absolute;
top:-100%;
left:-100%;
width:200%;
height:200%;
background:#ff0080;
transform:rotate(45deg);
transition:0.5s;
z-index:0;
}

/* Second diagonal layer */
.slide-diagonal-split::after{
content:"";
position:absolute;
bottom:-100%;
right:-100%;
width:200%;
height:200%;
background:#007bff;
transform:rotate(45deg);
transition:0.5s;
z-index:0;
}

/* Text */
.slide-diagonal-split span{
position:relative;
z-index:1;
}

/* Hover */
.slide-diagonal-split:hover::before{
top:-20%;
left:-20%;
}

.slide-diagonal-split:hover::after{
bottom:-20%;
right:-20%;
}

.slide-diagonal-split:hover{
transform:scale(1.05);
}

CSS Slide Button Effects