Skip to content

Commit fdb9d27

Browse files
MRIEnanMRIEnan
authored
Merge pull request #63 from NidaSyeda/main
Add glowing hover button by Nida Syeda
2 parents 6f51214 + 3f26cbe commit fdb9d27

4 files changed

Lines changed: 73 additions & 0 deletions

File tree

‎contributions/NidaSyeda/button.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Glowing Hover Button</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<button id="glowButton">Click Me!</button>
11+
<script src="script.js"></script>
12+
</body>
13+
</html>

‎contributions/NidaSyeda/index.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const buttonMetadata = {
2+
name: "Glowing Hover Button",
3+
author: "Nida Syeda",
4+
description: "A simple button with glowing hover animation using HTML, CSS, and JavaScript.",
5+
type: "html",
6+
tags: ["glow", "hover", "animation"],
7+
difficulty: "beginner",
8+
preview: "Click me!"
9+
};
10+
11+
export default buttonMetadata;

‎contributions/NidaSyeda/script.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const btn = document.getElementById('glowButton');
2+
btn.addEventListener('click', () => {
3+
btn.innerText = "Clicked!";
4+
setTimeout(() => btn.innerText = "Click Me!", 1500);
5+
});

‎contributions/NidaSyeda/style.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
height: 100vh;
6+
background: #0f2027;
7+
background: linear-gradient(to right, #2c5364, #203a43, #0f2027);
8+
font-family: 'Poppins', sans-serif;
9+
}
10+
11+
button {
12+
padding: 15px 40px;
13+
font-size: 18px;
14+
color: #fff;
15+
background: transparent;
16+
border: 2px solid #00ffff;
17+
border-radius: 8px;
18+
cursor: pointer;
19+
transition: 0.3s ease;
20+
position: relative;
21+
}
22+
23+
button::before {
24+
content: "";
25+
position: absolute;
26+
top: -5px;
27+
left: -5px;
28+
right: -5px;
29+
bottom: -5px;
30+
border-radius: 10px;
31+
background: linear-gradient(45deg, #00ffff, #ff00ff);
32+
z-index: -1;
33+
opacity: 0;
34+
transition: opacity 0.3s ease;
35+
}
36+
37+
button:hover::before {
38+
opacity: 1;
39+
}
40+
41+
button:hover {
42+
color: #0f2027;
43+
background-color: #00ffff;
44+
}

0 commit comments

Comments
 (0)