Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Creating Border Animation using CSS
CSS border animations add visual appeal and interactivity to web elements by creating smooth transitions and movements around element borders. These animations can enhance user experience through hover effects, loading indicators, and attention-grabbing buttons.
Syntax
selector {
border: width style color;
animation: name duration timing-function iteration-count;
transition: property duration timing-function;
}
Method 1: Hover Effect with Border Color Animation
This example creates a pulsing border animation that changes to a gradient border on hover
<!DOCTYPE html>
<html>
<head>
<title>Hover Effect Border Animation</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f8ff;
margin: 0;
}
.box {
padding: 20px 40px;
font-size: 18px;
color: #333;
background-color: white;
border: 3px solid transparent;
border-radius: 8px;
cursor: pointer;
transition: all 0.5s ease;
animation: border-pulse 2s ease-in-out infinite;
}
.box:hover {
border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1) 1;
animation: none;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
@keyframes border-pulse {
0%, 100% { border-color: #ff6b6b; }
33% { border-color: #4ecdc4; }
66% { border-color: #45b7d1; }
}
</style>
</head>
<body>
<div class="box">Hover over me</div>
</body>
</html>
A white box with pulsing colored borders appears. On hover, it transforms to show a gradient border with a subtle lift effect and shadow.
Method 2: Loading Spinner Animation
This creates a rotating border animation commonly used for loading indicators
<!DOCTYPE html>
<html>
<head>
<title>Loading Border Animation</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #2c3e50;
margin: 0;
}
.loading {
width: 60px;
height: 60px;
border: 4px solid #ecf0f1;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.loading-text {
margin-top: 20px;
color: #ecf0f1;
font-family: Arial, sans-serif;
text-align: center;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div>
<div class="loading"></div>
<div class="loading-text">Loading...</div>
</div>
</body>
</html>
A circular loading spinner with a blue top border continuously rotates clockwise, with "Loading..." text displayed below it on a dark background.
Method 3: Call-to-Action Button with Border Sweep
This example creates a button with an animated border sweep effect using pseudo-elements
<!DOCTYPE html>
<html>
<head>
<title>Call-to-Action Border Animation</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #1a1a2e;
margin: 0;
}
.cta-button {
display: inline-block;
padding: 16px 32px;
background-color: #16213e;
color: #fff;
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
border: 2px solid transparent;
border-radius: 8px;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
}
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, #0f3460, transparent);
transition: left 0.6s ease;
}
.cta-button:hover {
border-color: #0f3460;
color: #fff;
box-shadow: 0 0 20px rgba(15, 52, 96, 0.5);
}
.cta-button:hover::before {
left: 100%;
}
</style>
</head>
<body>
<a href="#" class="cta-button">Get Started</a>
</body>
</html>
A dark button with white text appears. On hover, a blue border appears with a glowing effect, and a light sweep animation moves across the button from left to right.
Key Points
Use
transitionfor smooth hover effects andanimationfor continuous movementsCombine
border-imagewith gradients for colorful animated bordersPseudo-elements (
::before,::after) create additional layers for complex effectsConsider performance impact limit animations on mobile devices
Conclusion
CSS border animations provide an effective way to enhance user interfaces with engaging visual effects. From simple hover states to complex loading animations, these techniques help create more interactive and polished web experiences.
5K+ Views
