<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Animated Buttons | Learn With Arshyan</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<style>
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Outfit', sans-serif;
background: linear-gradient(120deg, #fce3ec, #ffe8d2);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 40px 20px;
}
/* Section */
.button-section {
text-align: center;
max-width: 1000px;
width: 100%;
}
.button-section h1 {
margin-bottom: 40px;
font-size: 34px;
color: #222;
}
.button-section h1 i {
color: #7f27ff;
margin-right: 10px;
}
/* Grid */
.button-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
/* Base */
a[class^="btn-"] {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
font-weight: 600;
font-size: 16px;
border-radius: 50px;
text-decoration: none;
color: #fff;
position: relative;
overflow: hidden;
transition: 0.4s ease;
cursor: pointer;
}
/* Button Effects */
.btn-1 {
background: linear-gradient(45deg, #ff4e50, #f9d423);
}
.btn-1:hover {
transform: scale(1.1);
}
.btn-2 {
background: transparent;
color: #ff4e50;
border: 2px solid #ff4e50;
}
.btn-2::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #ff4e50;
z-index: -1;
transition: transform 0.4s ease;
transform: scaleX(0);
transform-origin: left;
}
.btn-2:hover::after {
transform: scaleX(1);
}
.btn-2:hover {
color: #fff;
}
.btn-3 {
background: #7f27ff;
box-shadow: 0 0 0 transparent;
}
.btn-3:hover {
box-shadow: 0 0 15px #7f27ff, 0 0 40px #7f27ff;
}
.btn-4 {
background: #00b894;
overflow: hidden;
}
.btn-4 i {
transform: translateX(-10px);
transition: 0.3s;
}
.btn-4:hover i {
transform: translateX(0);
}
.btn-5 {
background: #ff6f00;
box-shadow: inset 0 4px 0 #e65100;
transition: transform 0.2s ease;
}
.btn-5:active {
transform: scale(0.96);
box-shadow: inset 0 2px 0 #bf360c;
}
.btn-6 {
background: #fff;
color: #7f27ff;
border: 2px solid #7f27ff;
}
.btn-6:hover {
background: #7f27ff;
color: #fff;
}
.btn-7 {
background: #212121;
border: 2px solid #00e676;
box-shadow: 0 0 0 transparent;
}
.btn-7:hover {
box-shadow: 0 0 8px #00e676, 0 0 15px #00e676;
}
.btn-8 {
background: #6200ea;
position: relative;
}
.btn-8::after {
content: '';
position: absolute;
height: 3px;
width: 0%;
bottom: 12px;
left: 50%;
background: #fff;
transition: 0.4s ease;
transform: translateX(-50%);
}
.btn-8:hover::after {
width: 80%;
}
/* Icons */
a[class^="btn-"] i {
font-size: 16px;
}
/* Responsive */
@media (max-width: 600px) {
.button-grid {
flex-direction: column;
align-items: center;
}
a[class^="btn-"] {
width: 100%;
justify-content: center;
}
.button-section h1 {
font-size: 28px;
}
}
</style>
</head>
<body>
<section class="button-section">
<h1><i class="fas fa-mouse-pointer"></i> Animated Button Effects</h1>
<div class="button-grid">
<a href="#" class="btn-1"><i class="fas fa-hand-pointer"></i> Hover Me</a>
<a href="#" class="btn-2"><i class="fas fa-rocket"></i> Let's Go</a>
<a href="#" class="btn-3"><i class="fas fa-compass"></i> Explore</a>
<a href="#" class="btn-4"><i class="fas fa-link"></i> Click Here</a>
<a href="#" class="btn-5"><i class="fas fa-bolt"></i> Press Me</a>
<a href="#" class="btn-6"><i class="fas fa-sync-alt"></i> Flip It</a>
<a href="#" class="btn-7"><i class="fas fa-lightbulb"></i> Glow On</a>
<a href="#" class="btn-8"><i class="fas fa-underline"></i> Swipe</a>
</div>
</section>
</body>
</html>
]]>
