Skip to content

Commit 8140535

Browse files
avnisinnghavnisinngh
authored
Added Arrow Hover Button (#1495)
1 parent 5cd783c commit 8140535

File tree

3 files changed

+77
-0
lines changed

3 files changed

+77
-0
lines changed

‎Components/Buttons/Arrow-Hover-Button/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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+
<link rel="stylesheet" href="style.css">
7+
<title>Arrow Hover Button</title>
8+
</head>
9+
<body>
10+
<button class="group">
11+
<div class="button-text">Hover me</div>
12+
<div class="icon">
13+
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
14+
<path d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
15+
</svg>
16+
</div>
17+
</button>
18+
</body>
19+
</html>

‎Components/Buttons/Arrow-Hover-Button/style.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/* Centering the button */
2+
body {
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100vh;
7+
background-color: #f4f4f4; /* Light background */
8+
}
9+
10+
/* Button Styling */
11+
.group {
12+
position: relative;
13+
display: inline-flex;
14+
height: 50px;
15+
width: 50px;
16+
align-items: center;
17+
justify-content: center;
18+
overflow: hidden;
19+
border-radius: 50%;
20+
background-color: #222; /* Dark button */
21+
color: #ddd; /* Light text */
22+
font-size: 16px;
23+
font-weight: 600;
24+
cursor: pointer;
25+
transition: width 0.3s ease-in-out, border-radius 0.3s ease-in-out;
26+
}
27+
28+
/* Expand effect on hover */
29+
.group:hover {
30+
width: 130px;
31+
border-radius: 30px;
32+
}
33+
34+
/* Text Animation */
35+
.button-text {
36+
position: absolute;
37+
white-space: nowrap;
38+
opacity: 0;
39+
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
40+
}
41+
42+
/* Show text on hover */
43+
.group:hover .button-text {
44+
transform: translateX(-10px);
45+
opacity: 1;
46+
}
47+
48+
/* Icon Position */
49+
.icon {
50+
position: absolute;
51+
right: 10px;
52+
transition: transform 0.3s ease-in-out;
53+
}

‎assets/json_files/buttons.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@
99
"previewLink": "../../Components/Buttons/3D-Button-2/index.html",
1010
"sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/3D-Button-2"
1111
},
12+
{
13+
"title": "Arrow Hover Button",
14+
"previewLink": "../../Components/Buttons/Arrow-Hover-Button/index.html",
15+
"sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/Arrow-Hover-Button"
16+
},
1217
{
1318
"title": "Bat Button",
1419
"previewLink": "../../Components/Buttons/Bat-Button/index.html",

0 commit comments

Comments
 (0)