diff --git a/src/_includes/icons/social/facebook.svg b/src/_includes/icons/social/facebook.svg index 2ac4204..f2e90ef 100644 --- a/src/_includes/icons/social/facebook.svg +++ b/src/_includes/icons/social/facebook.svg @@ -1,6 +1,6 @@ - + diff --git a/src/_includes/icons/social/instagram.svg b/src/_includes/icons/social/instagram.svg index de5bb09..88679d9 100644 --- a/src/_includes/icons/social/instagram.svg +++ b/src/_includes/icons/social/instagram.svg @@ -1,7 +1,7 @@ - - + + diff --git a/src/_includes/icons/social/linkedin.svg b/src/_includes/icons/social/linkedin.svg index 6d3d850..f48e8d9 100644 --- a/src/_includes/icons/social/linkedin.svg +++ b/src/_includes/icons/social/linkedin.svg @@ -1,3 +1,3 @@ - + diff --git a/src/_includes/icons/social/telegram.svg b/src/_includes/icons/social/telegram.svg index 5824d3b..20260a7 100644 --- a/src/_includes/icons/social/telegram.svg +++ b/src/_includes/icons/social/telegram.svg @@ -1,6 +1,6 @@ - + diff --git a/src/_includes/icons/social/twitter.svg b/src/_includes/icons/social/twitter.svg index cc5c351..530ae6c 100644 --- a/src/_includes/icons/social/twitter.svg +++ b/src/_includes/icons/social/twitter.svg @@ -1,6 +1,6 @@ - + diff --git a/src/_includes/icons/social/whatsapp.svg b/src/_includes/icons/social/whatsapp.svg index 9bd4fa0..6a74f75 100644 --- a/src/_includes/icons/social/whatsapp.svg +++ b/src/_includes/icons/social/whatsapp.svg @@ -1,3 +1,3 @@ - + diff --git a/src/css/2-components/_buttons.scss b/src/css/2-components/_buttons.scss index 2285325..2c9b204 100755 --- a/src/css/2-components/_buttons.scss +++ b/src/css/2-components/_buttons.scss @@ -126,15 +126,49 @@ $btn-border-width: 0.1rem; border: none; margin: 0; background: none; + color: $color-purple-1; cursor: pointer; } -.btn--invisible svg { +/* ---------------------------------------------- + Generated by AnimatiSS + Licensed under FreeBSD License + URL: https://xsgames.co/animatiss + Twitter: @xsgames_ +---------------------------------------------- */ + +@keyframes social-shake { + 0%, + 100% { transform: rotate(0deg); transform-origin: 50% 50%; } + 10% { transform: rotate(2deg); } + + 20%, + 40%, + 60% { transform: rotate(-4deg); } + + 30%, + 50%, + 70% { transform: rotate(4deg); } + 80% { transform: rotate(-2deg); } + 90% { transform: rotate(2deg); } +} + +.btn--social:hover { + animation: social-shake 1.5s linear both; +} + +.btn--social svg { width: 4.2rem; - width: clamp(3.5rem, 5vw, 4.2rem); + width: clamp(3.5rem, 6vw, 5.5rem); height: auto; } +.btn--social:hover, +.btn--social:active, +.btn--social:focus { + color: $color-pink-1; +} + /* size -------------------------------------------------------------- */