Skip to content

Commit

Permalink
button animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@b27b
b27b committed Oct 14, 2024
1 parent 9483aeb commit 5b5cee0
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 20 deletions.
5 changes: 3 additions & 2 deletions app/components/ButtonDark.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,18 @@ export default function ButtonDark({
border = "",
className = ""
}) {

return (
<a
href={link}
target={target === "yes" ? "_blank" : "_self"}
className={`bg-bck-grey text-text-lightBody button-styling font-normal font-neraphic
className={`bg-bck-grey text-text-lightBody button-styling font-normal font-neraphic hover:scale-y-97 duration-300 group
${border ? "border-solid border-bck-white border-2" : ""}
${className}
`}
>
{text}
{icon && <img src={icon} className="w-4 mb-1" alt=""/>}
{icon && <img src={icon} className="w-4 mb-1 group-hover:rotate-[315deg] duration-300" alt=""/>}
</a>
);
}
7 changes: 3 additions & 4 deletions app/components/ButtonSecondary.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,8 @@ export default function ButtonSecondary({
button-styling font-neraphic
border-${border} border-solid border-1
${className}
hover:scale-97 duration-300 ease-out
max-md:text-body
hover:scale-x-97 duration-300 ease-out
max-md:text-body group
`}
// onMouseOver={(e) => {
// const img = e.currentTarget.querySelector("img");
Expand All @@ -42,7 +41,7 @@ export default function ButtonSecondary({
// }}
>
{text}
{icon && <img src={img} alt="" className="w-4 mb-1" />}
{icon && <img src={img} alt="" className="w-4 mb-1 group-hover:rotate-[315deg] duration-300" />}
</a>
);
}
20 changes: 10 additions & 10 deletions app/components/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,10 @@ export default function Footer() {
<a
href="https://discord.gg/vs9XdfuMJu"
target="_blank"
className="bg-bck-white button-styling font-neraphic max-md:hidden"
className="bg-bck-white button-styling font-neraphic max-md:hidden group hover:scale-y-97 duration-300"
>
Join the team
<img src="/images/icons/arrow-right.png" alt="" />
<img src="/images/icons/arrow-right.png" className="group-hover:rotate-[315deg] duration-300" alt="" />
</a>

<div className="max-md:hidden">
Expand Down Expand Up @@ -99,54 +99,54 @@ export default function Footer() {
<a
href="https://discord.gg/vs9XdfuMJu"
target="_blank"
className="font-suse text-text-lightSub text-xl underline decoration-text-lightSub flex justify-between items-center w-36
className="font-suse text-text-lightSub text-xl underline decoration-text-lightSub flex justify-between items-center w-36 group
"
>
Discord
<img
src="/images/icons/arrow-up-right-grey.png"
alt=""
className="h-6"
className="h-6 group-hover:rotate-45 duration-200"
/>
</a>

<a
href="https://github.com/uwrealitylabs"
target="_blank"
className="font-suse text-text-lightSub text-xl underline decoration-text-lightSub flex justify-between items-center w-36"
className="font-suse text-text-lightSub text-xl underline decoration-text-lightSub flex justify-between items-center w-36 group"
>
GitHub
<img
src="/images/icons/arrow-up-right-grey.png"
alt=""
className="h-6"
className="h-6 group-hover:rotate-45 duration-200"
/>
</a>

<a
href="https://www.linkedin.com/company/uwrealitylabs/"
target="_blank"
className="font-suse text-text-lightSub text-xl underline decoration-text-lightSub flex justify-between items-center w-36"
className="font-suse text-text-lightSub text-xl underline decoration-text-lightSub flex justify-between items-center w-36 group"
>
LinkedIn
<img
src="/images/icons/arrow-up-right-grey.png"
alt=""
className="h-6"
className="h-6 group-hover:rotate-45 duration-200"
/>
</a>

<a
href="https://www.instagram.com/uwrealitylabs/"
target="_blank"
className="font-suse text-text-lightSub text-xl underline decoration-text-lightSub flex justify-between items-center w-36"
className="font-suse text-text-lightSub text-xl underline decoration-text-lightSub flex justify-between items-center w-36 group"
>
Instagram
<img
src="/images/icons/arrow-up-right-grey.png"
alt=""
className="h-6"
className="h-6 group-hover:rotate-45 duration-200"
/>
</a>
</div>
Expand Down
10 changes: 6 additions & 4 deletions app/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,12 +78,12 @@ export default function App() {
</h1>
<button
onClick={() => ScrollToSection(Projects)}
className="bg-bck-grey text-text-lightBody button-styling font-normal font-neraphic"
className="bg-bck-grey text-text-lightBody button-styling font-normal font-neraphic group"
>
Dive Deeper
<img
src="images/icons/arrow-down-white.png"
className="w-4 mb-1"
src="images/icons/arrow-right-white.png"
className="w-4 mb-1 group-hover:rotate-[90deg] duration-300"
alt=""
/>
</button>
Expand Down Expand Up @@ -160,7 +160,9 @@ export default function App() {
button
border-solid border-bck-white border-2
bg-bck-grey
rounded-lg font-bold font-suse text-body leading-normal px-6 py-4 mb-24 mt-12"
rounded-lg font-bold font-suse text-body leading-normal px-6 py-4 mb-24 mt-12
hover:bg-bck-white hover:text-text-darkBody hover:scale-y-97 duration-300 ease-in-out
"
>
View All Projects
</a>
Expand Down

0 comments on commit 5b5cee0

Please sign in to comment.