Skip to content

Commit ea38799

Browse files
avnisinnghavnisinngh
authored
Added Push Sideward Hover Button (#1484)
1 parent 641f7d3 commit ea38799

File tree

3 files changed

+81
-0
lines changed

3 files changed

+81
-0
lines changed

‎Components/Buttons/Push-Sideward-Hover-Button/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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>Push Sideward Hover Button</title>
8+
</head>
9+
<body>
10+
<button class="group">
11+
<div class="button-text">Hover me</div>
12+
<div class="button-hover">Hover me</div>
13+
</button>
14+
</body>
15+
</html>

‎Components/Buttons/Push-Sideward-Hover-Button/style.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
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: 150px;
16+
align-items: center;
17+
justify-content: center;
18+
overflow: hidden;
19+
border-radius: 8px;
20+
border: 2px solid #525252;
21+
font-size: 16px;
22+
font-weight: 600;
23+
cursor: pointer;
24+
background-color: white;
25+
}
26+
27+
/* Default Text */
28+
.button-text {
29+
position: absolute;
30+
display: flex;
31+
height: 100%;
32+
width: 100%;
33+
align-items: center;
34+
justify-content: center;
35+
background-color: white;
36+
color: #222;
37+
transition: transform 0.3s ease-in-out;
38+
}
39+
40+
/* Hover Text */
41+
.button-hover {
42+
position: absolute;
43+
display: flex;
44+
height: 100%;
45+
width: 100%;
46+
align-items: center;
47+
justify-content: center;
48+
background-color: #3498db; /* Blue background */
49+
color: white;
50+
transform: translateX(100%);
51+
transition: transform 0.3s ease-in-out;
52+
}
53+
54+
/* Hover Effect */
55+
.group:hover .button-text {
56+
transform: translateX(-100%);
57+
}
58+
59+
.group:hover .button-hover {
60+
transform: translateX(0);
61+
}

‎assets/json_files/buttons.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,11 @@
199199
"previewLink": "../../Components/Buttons/Pulsing-Button/index.html",
200200
"sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/Pulsing-Button"
201201
},
202+
{
203+
"title": "Push Sideward Hover Button",
204+
"previewLink": "../../Components/Buttons/Push-Sideward-Hover-Button/index.html",
205+
"sourceLink": "https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/Push-Sideward-Hover-Button"
206+
},
202207
{
203208
"title": "Push Upward Hover Button",
204209
"previewLink": "../../Components/Buttons/Push-Upward-Hover-Button/index.html",

0 commit comments

Comments
 (0)