alecodes/personal-page
2
0
Fork 0
Code Issues 17 Pull requests Projects 1 Releases Packages 1 Wiki Activity Actions

feat(Style): add animations and effects to landing page

Browse source 
added:

- float like group
- button hover effect
- link hover glow effect
- component zoom effect
This commit is contained in:
Alexander Navarro 2024-03-14 17:22:03 -03:00
parent 9f15e40d6e
commit d7a9817514
5 changed files with 92 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/Button/Button.astro
View file

@ -10,7 +10,7 @@ const { className = '' } = Astro.props;
<slot />
</button>
<style>
<style lang="scss">
button {
font-size: 1rem;
padding: var(--prj-spacing-1) var(--prj-spacing-3);
@ -23,5 +23,18 @@ const { className = '' } = Astro.props;
cursor: pointer;
margin-bottom: 0;
box-shadow: 0 0 0px 0px var(--prj-accent-bg);
transition: color 0.2s, background-color 0.2s, translate 0.2s,
box-shadow 0.2s;
&:hover {
--anim-translation-value: -5px;
background-color: transparent;
color: var(--prj-text);
translate: var(--anim-translation-value) var(--anim-translation-value);
box-shadow: calc(var(--anim-translation-value) * -2)
calc(var(--anim-translation-value) * -2) 0px 0px var(--prj-accent-bg);
}
}
</style>