Skip to content

Commit 4e2989e

Browse files
harshita2216harshita2216
authored
Merge pull request #181 from siddhi-244/Siddhi/expand_btn
Added expand button
2 parents 2f753d6 + 8decc0c commit 4e2989e

File tree

5 files changed

+294
-0
lines changed

5 files changed

+294
-0
lines changed

‎Expand-Button/README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
### Expand Button
2+
A basic website with a expand button animation .
3+
4+
### Use of the Project:
5+
We can add this in any website to improve the Ui of the website.
6+
7+
### Tech Stack
8+
* HTML5
9+
* CSS3
10+
* JAVASCRIPT
11+
* Jquery
12+
13+
#### Steps to Use:
14+
15+
---
16+
17+
- Download or clone the repository
18+
19+
```
20+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
21+
```
22+
23+
- Go to the directory
24+
- Run the index.html file
25+
26+
---
27+
28+
### Demo
29+
30+
![Expand_button](https://user-images.githubusercontent.com/69195262/125184631-10f05380-e23d-11eb-82dc-8face7cdf699.gif)
31+

‎Expand-Button/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title></title>
5+
<link rel="stylesheet" type="text/css" href="style.css" />
6+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
7+
</head>
8+
<body>
9+
<div class="contact-btn">
10+
<span class="cta">Contact </span>
11+
<div class="close ion-close-round"></div>
12+
<div class="fake-input"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div>
13+
<div class="send-btn">
14+
<span class="snd">Send </span>
15+
<div class="msg">
16+
<div class="msg-close ion-close-round"></div> Wait for 5 sec !!
17+
</div>
18+
</div>
19+
</div>
20+
<script type="text/javascript" src="script.js"></script>
21+
</body>
22+
</html>

‎Expand-Button/script.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
$(".contact-btn").click(function () {
2+
$(this).addClass("clicked");
3+
});
4+
5+
$(".close").click(function (e) {
6+
$(".clicked").removeClass("clicked");
7+
e.stopPropagation();
8+
$(".send-clicked").removeClass("send-clicked");
9+
e.stopPropagation();
10+
});
11+
12+
$(".send-btn").click(function () {
13+
$(this).addClass("send-clicked");
14+
setTimeout(function () {
15+
$(".clicked").removeClass("clicked");
16+
17+
$(".send-clicked").removeClass("send-clicked");
18+
}, 5000);
19+
});
20+
21+
$(".msg-close").click(function (e) {
22+
$(".send-clicked").removeClass("send-clicked");
23+
e.stopPropagation();
24+
});
25+

‎Expand-Button/style.css

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
/* Main vars */
2+
:root {
3+
--pen-bg: #25fee0;
4+
5+
/* Contact Button vars */
6+
--btn-bg: #fff;
7+
--btn-color: #3b5998;
8+
--btn-active-color: #c0d0d9;
9+
--btn-border-radius: 100px;
10+
--btn-height: 72px;
11+
--btn-width: 200px;
12+
--btn-active-height: 470px;
13+
--btn-active-width: 460px;
14+
--btn-active-border-radius: 60px;
15+
16+
/* Send Button vars*/
17+
--send-btn-bg: #00e6ac;
18+
--send-btn-color: #fff;
19+
--send-btn-active-color: #004d39;
20+
--send-btn-border-radius: 100px;
21+
--send-btn-height: 48px;
22+
--send-btn-width: 120px;
23+
--send-btn-active-height: 48px;
24+
--send-btn-active-width: 120px;
25+
--send-btn-active-border-radius: 50px;
26+
27+
/* Close icon */
28+
--close-color: #cfd2d9;
29+
/* Close msg icon */
30+
--msg-close-color: #004d39;
31+
32+
/* Transition vars */
33+
--transition: all 0.25s ease-in-out;
34+
35+
/* Input */
36+
--input-color: #b2b5bc;
37+
--input-bg: #f3f6fb;
38+
39+
/* Message */
40+
--msg-color: #00a060;
41+
--msg-bg: #ffe6ac;
42+
}
43+
44+
/* Fonts */
45+
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
46+
47+
body {
48+
background-color: var(--pen-bg);
49+
font-family: "Montserrat";
50+
}
51+
/* Contact Button Start*/
52+
.contact-btn {
53+
position: absolute;
54+
background-color: var(--btn-bg);
55+
border-radius: var(--btn-border-radius);
56+
width: var(--btn-width);
57+
height: var(--btn-height);
58+
box-shadow: 0 5px 10px rgba(0, 0, 40, 0.03);
59+
transition: all 0.4s cubic-bezier(0.3, 0, 0, 1.3);
60+
overflow: hidden;
61+
cursor: pointer;
62+
top: 50%;
63+
left: 50%;
64+
transform: translateX(-50%) translateY(-50%);
65+
}
66+
67+
.contact-btn .cta {
68+
position: absolute;
69+
color: var(--btn-color);
70+
text-transform: uppercase;
71+
font-size: 16px;
72+
letter-spacing: 1px;
73+
transition: var(--transition);
74+
top: 50%;
75+
left: 50%;
76+
transform: translateX(-50%) translateY(-50%);
77+
}
78+
79+
.contact-btn .close {
80+
position: absolute;
81+
right: 38px;
82+
top: 31px;
83+
cursor: pointer;
84+
color: var(--close-color);
85+
font-size: 20px;
86+
opacity: 0;
87+
transition: all 0.4s cubic-bezier(0.3, 0, 0, 1.3);
88+
transform: rotate(-45deg);
89+
transform-origin: center center;
90+
}
91+
92+
.contact-btn .fake-input {
93+
width: 80%;
94+
padding-top: 15px;
95+
transform: scale(0.7) translateX(10px) translateY(-10px);
96+
transition: var(--transition);
97+
transform-origin: 0% 0%;
98+
opacity: 0;
99+
margin: 10px auto 0 auto;
100+
background-color: var(--input-bg);
101+
color: var(--input-color);
102+
border-radius: 10px;
103+
padding: 15px;
104+
font-size: 15px;
105+
overflow: hidden;
106+
}
107+
108+
.clicked {
109+
width: var(--btn-active-width);
110+
height: var(--btn-active-height);
111+
border-radius: var(--btn-active-border-radius);
112+
cursor: auto;
113+
overflow: visible;
114+
}
115+
116+
.contact-btn.clicked .cta {
117+
left: 40px;
118+
top: 30px;
119+
transform: translateX(0) translateY(0);
120+
color: #cfd2d9;
121+
}
122+
123+
.contact-btn.clicked .close {
124+
opacity: 1;
125+
transform: rotate(0deg);
126+
}
127+
.contact-btn.clicked .fake-input {
128+
transform: scale(1) translateX(0) translateY(0);
129+
opacity: 1;
130+
position: relative;
131+
top: 50px;
132+
}
133+
/* Contact Button End */
134+
/* Send Button Start */
135+
.send-btn {
136+
position: absolute;
137+
background-color: var(--send-btn-bg);
138+
border-radius: var(--send-btn-border-radius);
139+
width: var(--send-btn-width);
140+
height: var(--send-btn-height);
141+
box-shadow: 0 5px 10px rgba(0, 0, 40, 0.03);
142+
transition: all 0.4s cubic-bezier(0.3, 0, 0, 1.3);
143+
overflow: hidden;
144+
cursor: pointer;
145+
top: 400px;
146+
left: 300px;
147+
}
148+
149+
.send-btn .snd {
150+
position: absolute;
151+
color: var(--send-btn-color);
152+
text-transform: uppercase;
153+
font-size: 16px;
154+
letter-spacing: 1px;
155+
transition: var(--transition);
156+
top: 50%;
157+
left: 50%;
158+
transform: translateX(-50%) translateY(-50%);
159+
}
160+
161+
.send-btn .msg-close {
162+
position: absolute;
163+
right: 18px;
164+
top: 15px;
165+
cursor: pointer;
166+
color: var(--msg-close-color);
167+
font-size: 20px;
168+
opacity: 0;
169+
transition: all 0.4s cubic-bezier(0.3, 0, 0, 1.3);
170+
transform: rotate(-45deg);
171+
transform-origin: center center;
172+
}
173+
174+
.send-btn .msg {
175+
width: 180%;
176+
padding-top: 15px;
177+
transform: scale(0.7) translateX(10px) translateY(-10px);
178+
transition: var(--transition);
179+
transform-origin: 0% 0%;
180+
opacity: 0;
181+
margin: 10px auto 0 auto;
182+
background-color: var(--msg-bg);
183+
color: var(--msg-color);
184+
border-radius: 25px 25px 25px 1px;
185+
padding: 15px;
186+
font-size: 15px;
187+
/*overflow: hidden;*/
188+
}
189+
190+
.send-clicked {
191+
width: var(--send-btn-active-width);
192+
height: var(--send-btn-active-height);
193+
border-radius: var(--send-btn-active-border-radius);
194+
cursor: auto;
195+
overflow: visible;
196+
}
197+
198+
.send-btn.send-clicked .snd {
199+
color: var(--send-btn-active-color);
200+
}
201+
202+
.send-btn.send-clicked .msg-close {
203+
opacity: 1;
204+
transform: rotate(0deg);
205+
}
206+
.send-btn.send-clicked .msg {
207+
transform: scale(1) translateX(0) translateY(0);
208+
opacity: 1;
209+
position: relative;
210+
top: -127px;
211+
left: 180px;
212+
z-index: 999;
213+
}
214+
/* Send Button end*/
215+

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,4 @@
5656
| [Glassmorphism Animation Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Glassmorphism-Form) |A basic login page with Glassmorphism Animations |
5757
| [Battery Percentage Indicator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Battery%20Indicator) |This is a battery indicator app which is used to know battery percentage of the system. |
5858
| [ConnectFour](https://github.com/Shauryaditya/Web-dev-mini-projects/tree/main/ConnectFour) | This is a simple game which can be played between two players.The player who connects the four bubbles first wins the game . The bubbles could be connected horizontally , vertically or diagonally.The players have to be together since multiplayer feature is not available .|
59+
| [Expand Button](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Expand-Button) |It is a basic website with an expanding button on it. As we click on the button it expands and shrinks after 5 seconds. |

0 commit comments

Comments
 (0)