Skip to content
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

Animating Button #11

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Animating Button #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f8913bc
Add files via upload
iamjayandhan Mar 18, 2023
d83bdb4
Create readme.md
iamjayandhan Mar 18, 2023
8e4e3e0
Add files via upload
iamjayandhan Mar 18, 2023
19332ca
Delete index.html
iamjayandhan Mar 18, 2023
a2e101d
Delete styles.css
iamjayandhan Mar 18, 2023
b33441a
Update readme.md
iamjayandhan Mar 18, 2023
f9f5895
Update readme.md
iamjayandhan Mar 18, 2023
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
49 changes: 49 additions & 0 deletions public/Buttons/Jayandhan_21CSA48/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<div class="main-contain"></div>
<h1>Button Animation
<div class="div">
<div class="flex-1">
<button class="button btn-1">button</button>
</div>
<div class="flex-1">
<button class="button btn-2">button</button>
</div>
<div class="flex-1">
<button class="button btn-3">button</button>
</div>
<div class="flex-1">
<button class="button btn-4">button</button>
</div>
<div class="flex-1">
<button class="button button-mat btn--5">
<div class="psuedo-text">button</div>
</button>
</div>
<div class="flex-1">
<button class="button button-mat btn--6">
<div class="psuedo-text">button</div>
</button>
</div>
<div class="flex-1">
<button class="button button-mat btn--7">
<div class="psuedo-text">button</div>
</button>
</div>
<div class="flex-1">
<button class="button button-mat btn--8"><span class="psuedo-text">button</span></button>
</div>
</div>
</h1>
</body>
</html>

3 changes: 3 additions & 0 deletions public/Buttons/Jayandhan_21CSA48/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Animating Button

This code uses only html and css to bring the most stylish animations on the GUI.🙂
232 changes: 232 additions & 0 deletions public/Buttons/Jayandhan_21CSA48/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,232 @@
* {
font-size: 10px;
font-family: "Ubuntu", sans-serif;
}

body {
background: linear-gradient(to bottom right, #5533ff, #38e2ee);
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
position: relative;
}

.main-contain {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 180rem;
margin: auto;
}

h1 {
font-size: 6rem;
padding: 1rem;
text-align: center;
color: white;
font-weight: 500;
margin: 5rem 0 0 0;
}

button {
border: none;
text-decoration: none;
color: rgba(255, 255, 255, 0.95);
cursor: pointer;
}

.div {
padding-top: 50px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
text-align: center;
position: relative;
max-width: 1200px;
margin: auto;
}

.psuedo-text {
color: #5533ff;
position: relative;
top: 0;
height: 100%;
width: 100%;
display: inline;
height: auto;
font-size: 1.7rem;
font-size: 700;
transition: 0.25s ease-in;
transition-delay: 0.1s;
}

.flex-1 {
flex: 1;
min-width: 250px;
margin: 0 auto 50px;
}

.button {
padding: 2rem 7rem;
background: white;
text-align: center;
display: inline-block;
font-size: 1.7rem;
text-transform: uppercase;
font-weight: 700;
position: relative;
will-change: transform;
}

.button-mat {
color: #5533ff;
border: 0px transparent;
border-radius: 0.3rem;
transition: 0.3s ease-in-out;
transition-delay: 0.35s;
overflow: hidden;
}
.button-mat:before {
content: "";
display: block;
background: #401aff;
position: absolute;
width: 200%;
height: 500%;
border-radius: 100%;
transition: 0.36s cubic-bezier(0.4, 0, 1, 1);
}
.button-mat:hover .psuedo-text {
color: white;
}
.button-mat:hover {
color: transparent;
}

.btn-1 {
letter-spacing: 0.05rem;
transition: 0.5s all ease-in-out;
position: relative;
background: transparent;
}
.btn-1:before {
border-top: 0.3rem solid white;
border-bottom: 0.3rem solid white;
display: block;
position: absolute;
background: transparent;
content: "";
top: 0;
bottom: 0;
left: 100%;
right: 100%;
transition: 0.48s all ease-in-out;
}
.btn-1:hover {
letter-spacing: 0.4rem;
}
.btn-1:hover:before {
left: 25%;
right: 25%;
}

.btn-2 {
letter-spacing: 0.05rem;
position: relative;
background: white;
color: #401aff;
border-radius: 0.3rem;
position: relative;
transition: 0.2s all ease-in-out;
}
.btn-2:before {
display: block;
position: absolute;
background: transparent;
border: none;
border-radius: 0.3rem;
transform: translateY(5px) scale(0.9);
content: "";
height: 5px;
z-index: -1;
bottom: -1%;
left: 0;
right: 0;
transition: 0.2s all ease-in-out;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.btn-2:hover:before {
transform: translateY(8px) scale(0.8);
opacity: 0.8;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.btn-2:hover {
transform: translateY(-5px);
}

.btn-3 {
letter-spacing: 0.05rem;
position: relative;
background: white;
color: #401aff;
overflow: hidden;
transition: 0.3s ease-in-out;
border-radius: 0.3rem;
z-index: 1;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.btn-3:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
transform: scale(0.95);
}

.btn-4 {
background: rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.95);
border: 1px solid white;
transition: 0.3s all ease-in-out;
}
.btn-4:hover {
background: rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.85);
}

.btn--5 {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.btn--5:before {
transform: translate(-120%, -50%) translateZ(0);
}
.btn--5:hover:before {
transform: translate(-45%, -34%) translateZ(0);
}

.btn--6 {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.btn--6:before {
transform: translate(40%, -50%) translateZ(0);
}
.btn--6:hover:before {
transform: translate(-45%, -34%) translateZ(0);
}

.btn--7 {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.btn--7:before {
transform: translate(-110%, -110%) translateZ(0);
}
.btn--7:hover:before {
transform: translate(-45%, -34%) translateZ(0);
}

.btn--8 {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.btn--8:before {
transform: translate(30%, 10%) translateZ(0);
}
.btn--8:hover:before {
transform: translate(-45%, -34%) translateZ(0);
}