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

button animation done #26

Merged
merged 1 commit into from
Jan 28, 2024
Merged

button animation done #26

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
162 changes: 131 additions & 31 deletions public/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,27 +18,18 @@ div.home {
div.home p.text {
/* color: #fff; */
font-size: 6rem;
font-weight: 400;
font-weight: 500;
font-family: "Noto Sans Display", sans-serif;
text-align: center;
margin-bottom: 1rem;
line-height: 1.2;
}

div.home p.last {
/* color: #fff; */
font-size: 2rem;
font-weight: 300;
font-family: "Noto Sans Display", sans-serif;
text-align: center;
margin-bottom: 1rem;
line-height: 1.2;
}

span.tsig {
div.home span.tsig {
/* color: #fff; */
font-size: 7rem;
font-weight: 400;
font-weight: 500;
font-family: "Noto Sans Display", sans-serif;
text-align: center;
background: linear-gradient(to bottom right,
Expand All @@ -53,29 +44,20 @@ span.tsig {
animation: textShine 3s ease-in-out infinite alternate;
}

/* @keyframes textShine {
0% {
background-position: 100% 0%;
}

100% {
background-position: 0% 100%;
}
} */

@keyframes textShine {
0% {

background-position: 100% 0%;
}

50% {

background-position: 0% 100%;
}

100% {

background-position: 100% 0%;
}
}
Expand All @@ -89,7 +71,7 @@ div.home div.down {
}

div.down a {
margin: 10px;
/* margin: 10px;
background-color: transparent;
color: black;
font-size: 1.5rem;
Expand All @@ -98,37 +80,155 @@ div.down a {
padding: 10px 20px;
border: white 2px solid;
cursor: pointer;
transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; */


position: relative;
display: inline-block;
padding: 25px 30px;
margin: 40px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
transition: 0.5s;
letter-spacing: 4px;
overflow: hidden;
}

div.down a:hover {
background: #03e9f4;
color: #050801;
box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
0 0 200px #03e9f4;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}

a:nth-child(1) {
filter: hue-rotate(270deg);
}

a:nth-child(2) {
filter: hue-rotate(110deg);
}

a span {
position: absolute;
display: block;
}

a span:nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #fff);
animation: animate1 1s linear infinite;
}

@keyframes animate1 {
0% {
left: -100%;
}

50%,
100% {
left: 100%;
}
}

a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #fff);
animation: animate2 1s linear infinite;
animation-delay: 0.25s;
}

@keyframes animate2 {
0% {
top: -100%;
}

50%,
100% {
top: 100%;
}
}

a span:nth-child(3) {
bottom: 0;
right: 0;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #fff);
animation: animate3 1s linear infinite;
animation-delay: 0.5s;
}

@keyframes animate3 {
0% {
right: -100%;
}

50%,
100% {
right: 100%;
}
}

a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #fff);
animation: animate4 1s linear infinite;
animation-delay: 0.75s;
}

@keyframes animate4 {
0% {
bottom: -100%;
}

50%,
100% {
bottom: 100%;
}
}


div.down p.last {
font-size: 2rem;
font-weight: 400;
font-family: "Noto Sans Display", sans-serif;
text-align: center;
margin: 1rem;

font-style: italic;
}

a i {
font-size: 3rem;
color: #FFF;

}


@media (min-width: 270px) and (max-width: 768px) {
div.home p.text {
font-size: 3rem;

}

div.home p.last {
font-size: 1rem;
div.down p.last {
font-size: 1.5rem;
}

span.tsig {
div.home span.tsig {
font-size: 4rem;

}

div.home a {
Expand Down
8 changes: 4 additions & 4 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,11 +132,11 @@
})
</script>
<div class="home">
<p class="text">Unlock Your Potential <br>
With <span class="tsig">TSIG</span> <br>
<p class="text">Unlock your potential <br>
with <span class="tsig">TSIG</span> <br>
<div class="down">
<a href="https://forms.gle/9UYQddtDJrMrgfc86"><i class="fa-solid fa-arrow-right"></i></a>
<p class="last">Innovation Across Domains</p>
<a href="https://forms.gle/9UYQddtDJrMrgfc86"><span></span><span></span><span></span><span></span><i class="fa-solid fa-arrow-right"></i></a>
<p class="last">Innovation across domains</p>
</div>
</div>

Expand Down