TDS CodeFx | CSS Outline Button Animation


<button class="border-draw-left">
<span>Explore</span>
</button>


.border-draw-left{
padding:14px 32px;
font-size:18px;
font-weight:bold;
color:#8A2BE2;
background:transparent;
border:none;
cursor:pointer;
position:relative;
outline:none;
}

/* Top & Bottom lines */
.border-draw-left::before,
.border-draw-left::after{
content:"";
position:absolute;
height:2px;
width:0;
background:#8A2BE2;
transition:0.4s ease;
}

/* Top line */
.border-draw-left::before{
top:0;
left:0;
}

/* Bottom line */
.border-draw-left::after{
bottom:0;
right:0;
}

/* Left & Right lines */
.border-draw-left span::before,
.border-draw-left span::after{
content:"";
position:absolute;
width:2px;
height:0;
background:#8A2BE2;
transition:0.4s ease;
}

/* Left line */
.border-draw-left span::before{
top:0;
left:0;
}

/* Right line */
.border-draw-left span::after{
bottom:0;
right:0;
}

/* Hover animation */
.border-draw-left:hover::before{
width:100%;
}

.border-draw-left:hover::after{
width:100%;
transition-delay:0.2s;
}

.border-draw-left:hover span::before{
height:100%;
transition-delay:0.4s;
}

.border-draw-left:hover span::after{
height:100%;
transition-delay:0.6s;
}


<button class="border-draw-right">Explore</button>


.border-draw-right{
padding:14px 32px;
font-size:18px;
font-weight:bold;
color:#8A2BE2;
background:transparent;
border:none;
cursor:pointer;
position:relative;
outline:none;
}

/* Top & Bottom lines */
.border-draw-right::before,
.border-draw-right::after{
content:"";
position:absolute;
height:2px;
width:0;
background:#8A2BE2;
transition:0.4s ease;
}

/* Top line */
.border-draw-right::before{
top:0;
right:0;
}

/* Bottom line */
.border-draw-right::after{
bottom:0;
left:0;
}

/* Left & Right lines */
.border-draw-right span::before,
.border-draw-right span::after{
content:"";
position:absolute;
width:2px;
height:0;
background:#8A2BE2;
transition:0.4s ease;
}

/* Right line */
.border-draw-right span::before{
top:0;
right:0;
}

/* Left line */
.border-draw-right span::after{
bottom:0;
left:0;
}

/* Hover animation */
.border-draw-right:hover::before{
width:100%;
}

.border-draw-right:hover::after{
width:100%;
transition-delay:0.2s;
}

.border-draw-right:hover span::before{
height:100%;
transition-delay:0.4s;
}

.border-draw-right:hover span::after{
height:100%;
transition-delay:0.6s;
}

<button class="border-expand-button">Get Started</button>

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

/* Pseudo-element for border expansion */
.border-expand-button::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border: 2px solid #007bff;
border-radius: 50px;
transform: translate(-50%, -50%);
transition: all 0.4s ease;
z-index: -1;
}

/* On hover, expand the border */
.border-expand-button:hover::before {
width: 120%;
height: 120%;
}

/* Optional: text color change */
.border-expand-button:hover {
color: #007bff;
}

<button class="outline-pulse-button">Get Started</button>

 .outline-pulse-button { position: relative; padding: 15px 35px; font-size: 18px; font-weight: bold; color: #007bff; background: transparent; border: 2px solid #007bff; border-radius: 50px; cursor: pointer; outline: none; transition: all 0.3s ease; /* Pulse animation */ animation: pulse-border 2s infinite; }

/* Hover optional: scale slightly */
.outline-pulse-button:hover {
transform: scale(1.05);
}

/* Pulse animation keyframes */
@keyframes pulse-border {
0% {
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.5);
}
50% {
box-shadow: 0 0 10px 10px rgba(0, 123, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
}
}

<button class="glow-pulse-button">Get Started</button>

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

/* Hover: glowing border */
.glow-pulse-button:hover {
box-shadow: 0 0 15px 5px rgba(0, 123, 255, 0.5);
transform: scale(1.05);
}

/* Click / active animation /
.glow-pulse-button:active {
transform: scale(0.95); / Button pressed */
box-shadow: 0 0 25px 10px rgba(0, 123, 255, 0.4);
}

/* Optional: subtle pulse animation continuously */
.glow-pulse-button::after {
content: "";
position: absolute;
top: -5px;
left: -5px;
width: calc(100% + 10px);
height: calc(100% + 10px);
border-radius: 50px;
border: 2px solid rgba(0, 123, 255, 0.2);
opacity: 0;
transition: opacity 0.4s ease, transform 0.4s ease;
}

/* On hover: show pulse outline */
.glow-pulse-button:hover::after {
opacity: 1;
transform: scale(1.1);
}

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

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

/* Outer border using pseudo-element /
.double-border-button::before {
content: "";
position: absolute;
top: -6px;
left: -6px;
width: calc(100% + 12px);
height: calc(100% + 12px);
border: 2px solid #007bff; / Outer border */
border-radius: 50px;
opacity: 0;
transform: scale(0.9);
transition: all 0.4s ease;
z-index: -1;
}

/* Hover: show outer border with glow */
.double-border-button:hover::before {
opacity: 1;
transform: scale(1);
box-shadow: 0 0 20px 5px rgba(0,123,255,0.3);
}

/* Text span for color change */
.double-border-button span {
position: relative;
z-index: 1;
transition: color 0.3s ease;
}

/* Hover text color change */
.double-border-button:hover span {
color: #007bff;
}

/* Click / active effect */
.double-border-button:active {
transform: scale(0.95);
box-shadow: 0 0 25px 8px rgba(0,123,255,0.2);
}

<button class="dash-animate-button"><span>Get Started</span></button>

 .dash-animate-button { position: relative; padding: 15px 40px; font-size: 18px; font-weight: bold; color: #007bff; background: transparent; border: 2px dashed #007bff; border-radius: 50px; cursor: pointer; overflow: hidden; transition: all 0.3s ease; }

/* Dash animation using border-image trick */
.dash-animate-button::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
width: calc(100% + 4px);
height: calc(100% + 4px);
border: 2px dashed #007bff;
border-radius: 50px;
z-index: -1;
animation: dash-slide 1s linear infinite;
}

/* Animate the dash offset /
@keyframes dash-slide {
0% {
border-spacing: 0; / fallback for smoother animation /
border-image: linear-gradient(to right, #007bff 50%, transparent 50%) 1;
transform: translateX(0);
}
100% {
transform: translateX(15px); / Dash movement */
}
}

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

/* Hover: text color & slight scale */
.dash-animate-button:hover span {
color: #007bff;
}

.dash-animate-button:hover {
transform: scale(1.05);
}

/* Click effect */
.dash-animate-button:active {
transform: scale(0.95);
box-shadow: 0 0 10px rgba(0,123,255,0.2);
}

<button class="animated-dash-button"><span>Get Started</span></button>

 .animated-dash-button { position: relative; padding: 15px 40px; font-size: 18px; font-weight: bold; color: #007bff; background: transparent; border: 2px dashed #007bff; border-radius: 50px; cursor: pointer; overflow: hidden; transition: all 0.3s ease; z-index: 0; }

/* Animate dashed border using pseudo-element /
.animated-dash-button::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px dashed #007bff;
border-radius: 50px;
z-index: -1; / Keep behind the text /
pointer-events: none; / Don’t block mouse events */
animation: dash-slide 2s linear infinite;
}

/* Keyframes for dash animation /
@keyframes dash-slide {
0% {
border-spacing: 0; / fallback */
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

/* Text span styling /
.animated-dash-button span {
position: relative;
z-index: 1; / Always above the pseudo-element */
transition: color 0.3s ease;
}

/* Hover: text color & glow /
.animated-dash-button:hover span {
color: white; / Change text on hover */
}

.animated-dash-button:hover {
box-shadow: 0 0 15px rgba(0,123,255,0.5);
transform: scale(1.05);
}

/* Click effect */
.animated-dash-button:active {
transform: scale(0.95);
box-shadow: 0 0 25px rgba(0,123,255,0.4);
}


<button class="outline-underline-expand">Explore</button>


.outline-underline-expand{
padding:14px 32px;
font-size:18px;
font-weight:bold;
color:#8A2BE2;
background:transparent;
border:2px solid #8A2BE2;
cursor:pointer;
position:relative;
outline:none;
overflow:hidden;
transition:all 0.3s ease;
}

/* underline element */
.outline-underline-expand::after{
content:"";
position:absolute;
bottom:0;
left:50%;
width:0;
height:3px;
background:#8A2BE2;
transition:all 0.4s ease;
transform:translateX(-50%);
}

/* hover effects */
.outline-underline-expand:hover{
background:#8A2BE2;
color:white;
}

/* underline expand */
.outline-underline-expand:hover::after{
width:100%;
}


<button class="outline-border-rotate">
<span>Explore</span>
</button>


.outline-border-rotate{
padding:14px 32px;
font-size:18px;
font-weight:bold;
background:transparent;
border:2px solid #8A2BE2;
cursor:pointer;
position:relative;
overflow:hidden;
color:#8A2BE2;
}

/* text layer */
.outline-border-rotate span{
position:relative;
z-index:2;
}

/* rotating border layer */
.outline-border-rotate::before{
content:"";
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:conic-gradient(
transparent,
#8A2BE2,
transparent 30%
);
opacity:0;
transition:0.3s;
animation:rotateBorder 3s linear infinite;
}

/* activate on hover */
.outline-border-rotate:hover::before{
opacity:1;
}

/* rotation animation */
@keyframes rotateBorder{
100%{
transform:rotate(360deg);
}
}


<button class="outline-ripple">
<span>Explore</span>
</button>


.outline-ripple{
padding:14px 32px;
font-size:18px;
font-weight:bold;
background:transparent;
border:2px solid #8A2BE2;
color:#8A2BE2;
cursor:pointer;
position:relative;
overflow:hidden;
}

/* text layer */
.outline-ripple span{
position:relative;
z-index:2;
}

/* ripple element */
.outline-ripple::before{
content:"";
position:absolute;
top:50%;
left:50%;
width:0;
height:0;
background:rgba(138,43,226,0.25);
border-radius:50%;
transform:translate(-50%,-50%);
transition:width 0.6s ease, height 0.6s ease;
}

/* ripple expand */
.outline-ripple:hover::before{
width:300%;
height:300%;
}


<button class="outline-dash">
<span>Explore</span>
</button>


.outline-dash{
padding:14px 32px;
font-size:18px;
font-weight:bold;
background:transparent;
border:2px dashed #8A2BE2;
color:#8A2BE2;
cursor:pointer;
position:relative;
overflow:hidden;
transition:0.3s;
}

/* text layer */
.outline-dash span{
position:relative;
z-index:2;
}

/* hover animation */
.outline-dash:hover{
animation:dashMove 1s linear infinite;
}

/* dash movement */
@keyframes dashMove{
0%{
border-style:dashed;
border-color:#8A2BE2;
}
100%{
border-style:dashed;
border-color:#8A2BE2;
border-image: repeating-linear-gradient(
90deg,
#8A2BE2 0px,
#8A2BE2 8px,
transparent 8px,
transparent 16px
) 1;
}
}

CSS Outline Button Effects