Skip to content

Animated submit button in quiz.html #599

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Khyati-Kapil wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Animated submit button in quiz.html #599

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions Animation login page/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,18 @@ h2 {
border-radius: 5px;
border: none;
outline: none;
transition: all 0.3s ease;
}

.btn:hover {
transform: scale(1.1) translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, .6);
background: linear-gradient(to right, #1976d2, #c2185b);
}

.btn:active {
transform: scale(0.98) translateY(0);
box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}

.sign-link {
Expand Down
12 changes: 12 additions & 0 deletions Blogger-Website-main/blogers website/contact.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,18 @@
.btn-btn-primary {
margin-top: 20vh;
cursor: pointer;
transition: all 0.3s ease;
}

.btn-btn-primary:hover {
transform: scale(1.1) translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
background-color: #0056b3;
}

.btn-btn-primary:active {
transform: scale(0.98) translateY(0);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

.contact-footer {
Expand Down
14 changes: 13 additions & 1 deletion City Finder/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,4 +288,16 @@ header {
#map {
width: 100%;
height: 100%;
}
}

input[type="submit"] {
transition: transform 0.3s ease;
}

input[type="submit"]:hover {
transform: scale(1.05);
}

input[type="submit"]:active {
transform: scale(0.95);
}
11 changes: 11 additions & 0 deletions Netflix UI Clone/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,18 @@ nav button{
border-radius: 5px;
cursor: pointer;
padding: 15px 30px;
transition: all 0.3s ease;
}

.email-sign button:hover {
transform: scale(1.1) translateY(-2px);
box-shadow: 0 4px 20px rgba(219, 0, 1, 0.4);
background: #e50914;
}

.email-sign button:active {
transform: scale(0.98) translateY(0);
box-shadow: 0 1px 5px rgba(219, 0, 1, 0.2);
}

/* features/ */
Expand Down
17 changes: 14 additions & 3 deletions Portfolio_02/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,9 +203,20 @@ Reusable css code
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease 0s ;
-moz-transition: all 0.3s ease 0s ;
-o-transition: all 0.3s ease 0s ;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
}

.btn:hover {
transform: scale(1.1) translateY(-2px);
box-shadow: 0 4px 20px rgba(132, 144, 255, 0.4);
background: linear-gradient(0deg, rgb(98, 189, 252) 0%, rgb(132, 144, 255) 100%);
}

.btn:active {
transform: scale(0.98) translateY(0);
box-shadow: 0 1px 5px rgba(132, 144, 255, 0.2);
}

.btn:hover,
Expand Down
42 changes: 42 additions & 0 deletions Quiz app using html js css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,20 @@ h3 {
text-decoration: none;
color: #56a5eb;
background-color: white;
transition: all 0.3s ease;
}

.btn:hover {
transform: scale(1.1) translateY(-2px);
box-shadow: 0 4px 20px rgba(86, 165, 235, 0.4), 0 0 20px rgba(86, 165, 235, 0.6);
background-color: #f0f8ff;
transition: all 0.3s ease;
}

.btn:active {
transform: scale(0.95) translateY(0);
box-shadow: 0 1px 5px rgba(86, 165, 235, 0.2);
animation: bounce 0.2s ease;
}

.btn:hover {
Expand All @@ -105,6 +119,34 @@ h3 {
transform: none;
}

.btn:not([disabled]) {
animation: pulse 2s infinite;
}

@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
100% {
transform: scale(1);
}
}

@keyframes bounce {
0% {
transform: scale(0.95) translateY(0);
}
50% {
transform: scale(1.05) translateY(-2px);
}
100% {
transform: scale(0.95) translateY(0);
}
}

/* FORMS */
form {
width: 100%;
Expand Down
37 changes: 37 additions & 0 deletions Quiz/Quiz.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,43 @@ div button{
color: rgb(233, 226, 226);
border: none;
border-radius: 10px;
animation: pulse 2s infinite;
transition: all 0.3s ease;
}

div button:hover {
background-color: rgb(165, 52, 52);
transform: scale(1.1);
box-shadow: 0 4px 15px rgba(145, 47, 47, 0.5);
}

div button:active {
transform: scale(0.95);
animation: bounce 0.2s ease;
}

@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}

@keyframes bounce {
0% {
transform: scale(0.95);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(0.95);
}
}
div input::-webkit-inner-spin-button,
div input::-webkit-outer-spin-button {
Expand Down
12 changes: 12 additions & 0 deletions Scannable QR CODE Generator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,18 @@ button {
font-weight: bold;
align-items: center;
font-weight: 400px;
transition: all 0.3s ease;
}

button:hover {
transform: scale(1.1) translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 123, 0.4);
background: #00008B;
}

button:active {
transform: scale(0.98) translateY(0);
box-shadow: 0 1px 5px rgba(0, 0, 123, 0.2);
}
.error{
animation:shake 0.1s linear 10;
Expand Down
12 changes: 12 additions & 0 deletions WeatherApp/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,18 @@ nav ul li a{
padding: 0.4rem 1.2rem;
margin: auto;
color: white;
transition: all 0.3s ease;
}

.input-section button:hover {
transform: scale(1.1) translateY(-2px);
box-shadow: 0 4px 20px rgba(5, 143, 109, 0.4);
background-color: rgb(49, 99, 110);
}

.input-section button:active {
transform: scale(0.98) translateY(0);
box-shadow: 0 1px 5px rgba(5, 143, 109, 0.2);
}
.input-section button:hover{
background-color: rgb(49, 99, 110);
Expand Down
13 changes: 12 additions & 1 deletion love-calculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,18 @@ button{
background-color: #0d6efd;
color: white;
cursor: pointer;
transition: 500ms ease-in-out;
transition: all 0.3s ease;
}

button:hover {
transform: scale(1.1) translateY(-2px);
box-shadow: 0 4px 20px rgba(13, 110, 253, 0.4);
background-color: #00327e;
}

button:active {
transform: scale(0.98) translateY(0);
box-shadow: 0 1px 5px rgba(13, 110, 253, 0.2);
}
button:hover{
background-color: #00327e;
Expand Down
12 changes: 12 additions & 0 deletions portfolio/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -603,6 +603,18 @@ footer{
outline: none;
cursor: pointer;
color: white;
transition: all 0.3s ease;
}

.footer-d button:hover {
transform: scale(1.1) translateY(-2px);
color: crimson;
box-shadow: 0 4px 15px rgba(220, 20, 60, 0.4);
}

.footer-d button:active {
transform: scale(0.98) translateY(0);
box-shadow: 0 1px 5px rgba(220, 20, 60, 0.2);
}

.footer-d button fa-solid{
Expand Down