fix: social button hover glitch, cleanup: contrib button

This commit is contained in:
Nikita Krupin 2022-08-15 21:35:38 -04:00
parent d1f19bf1a8
commit f9dd805494
3 changed files with 30 additions and 27 deletions

View File

@ -22,6 +22,7 @@
button {
color: var(--white);
border-radius: 200px;
overflow: hidden;
border: 0;
/* padding: 5px 5px; */
width:86px;
@ -40,10 +41,7 @@
}
img {
/* margin: 0;
padding: 0; */
border-radius: 50%;
max-height: 86px;
max-width: 86px;
height: 100%;
width: 100%;
}
</style>

View File

@ -1,38 +1,44 @@
<script>
export let src = 'socials/github.svg';
export let alt = 'GitHub';
export let href = '#';
export let alt = 'GitHub';
export let href = '#';
</script>
<button>
<a {href}>
<img {src} {alt}>
</a>
</button>
<div>
<button>
<a {href}>
<img {src} {alt} />
</a>
</button>
</div>
<style>
button {
color: var(--white);
border-radius: 200px;
border: 0;
border: 0;
width: 60px;
height: 60px;
padding: 14px;
width:60px;
height:60px;
cursor: pointer;
border-radius: 200px;
transition: transform 0.4s var(--bezier-one);
background-color: var(--grey-four);
font-size: 1.5rem;
transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one);
color: var(--white);
user-select: none;
margin-right:0.5rem;
margin-right: 0.5rem;
margin-left: 0.5rem;
}
img {
width:30px;
}
div {
display: inline-block;
}
button:hover {
transform: translate(0%, -5%);
img {
transition: filter 0.4s var(--bezier-one);
width: 30px;
}
div:hover > button {
transform: translateY(-5%);
}
button:hover img {

View File

@ -12,11 +12,10 @@
<style>
.social-host {
justify-content: space-between;
position: absolute;
align-items: center;
position: fixed;
bottom: 3rem;
left: 5.5rem;
user-select: none;
}
@media screen and (max-width: 1052px) {