9 사용자 정의 CSS 및 JavaScript 소셜 공유 버튼

모든 사이트에는 웹에서 공유를 늘리기 위한 몇 가지 소셜 버튼이 포함되어야 합니다. 그러나 기본 공유 버튼은 그다지 좋지 않으며 네트워크 브랜드에 따라 스타일이 다릅니다.

이것이 바로 우리가 자신의 사이트에서 형식을 지정하고 재사용할 수 있는 이 작은 사용자 정의 공유 버튼 모음을 선별한 이유입니다. 아름다운 공유 버튼을 찾고 있다면 이 템플릿이 훌륭한 출발점이 될 것입니다.

1. 사이드 쉐어링

첫 번째는 개발자 Michael Schofield가 만든 내가 가장 좋아하는 기술 중 하나입니다. 이 고정된 측면 공유 소셜 배지 UI는 큰 블로그와 잡지 사이트에서 정말 일반적입니다.

이러한 소셜 배지는 헤드라인 근처 맨 위에 위치하거나 사용자와 함께 아래로 스크롤할 수 있습니다. 차이점을 비교하는 사례 연구를 찾지 못했지만 고정 버튼이 더 많은 공유 수를 볼 수 있다고 상상합니다. 어느 쪽이든 너무 잘 설계되어 레이아웃에 스팸이나 구겨진 것처럼 보이지 않습니다.

블로그를 운영하고 사용자 지정 공유 배지를 원하는 경우 시작하기에 가장 좋은 템플릿일 것입니다.

2. 이미지 버튼

또 다른 인기 있는 공유 스타일은 웹사이트에서 찾은 이미지를 다시 게시하는 것입니다. 이것은 Pinterest에서 인기가 있지만 Facebook과 Twitter, 심지어 Google+에서도 잘 작동합니다.

이 이미지 버튼은 순수한 CSS3와 각 버튼에 대한 일부 배경 로고를 사용하는 맞춤형 디자인입니다. 그들은 아직 어떤 소셜 네트워크에도 연결되어 있지 않지만 앵커 링크는 소셜 공유를 위해 쉽게 프로그래밍할 수 있습니다.

디자인은 어떤 이미지에든 경이적 으로 보이기 때문에 여기에서 정말 초점을 맞춥니다. 또한 위치는 게시물뿐만 아니라 이미지 자체의 공유를 장려하려는 아이디어를 실제로 제공합니다.

3. 공유 토글

우리는 모두 작은 공유 아이콘과 플라이아웃 메뉴를 사용하는 WordPress 공유 위젯을 보았습니다. 시간이 지나면 변질될 수 있으므로 약간 섞는 것이 도움이 됩니다.

이 스니펫을 사용하면 맞춤형 애니메이션과 숨겨진 메뉴로 소셜 공유 스타일을 변경할 수 있습니다. 여러 네트워크에서 많은 공유를 권장하려는 사이트가 있는 모든 사람에게 적합합니다.

각 아이콘은 순수 CSS로 디자인되었으며 애니메이션은 jQuery를 통해 제어됩니다. 이것을 모든 레이아웃에 복사/붙여넣기만 하면 작동할 수 있습니다. 기사 헤드라인 바로 옆이나 사람들이 다 읽은 후 맨 아래에도 잘 맞습니다. 어느 쪽이든 전반적으로 사회적 공유를 증가시키는 것이 확실합니다.

4. 서클 애니메이션

약간의 재미있는 애니메이션을 보려면 Stephane Lyver가 만든 이 원형 버튼을 확인하세요.

각 버튼에는 고유한 마우스 오버-애니메이션 효과가 있으며 모든 레이아웃에 완벽하게 혼합될 수 있습니다. 배경과 아이콘 색상을 변경하여 평범한 흰색 배경과 대조를 이루도록 할 수도 있습니다.

모든 것은 순수한 CSS에서 실행되며 아이콘은 Bootstrap을 통해 Font Awesome에서 가져옵니다.

이 버튼은 소셜 공유 링크에도 직접 연결되지 않지만 올바른 코드로 쉽게 수정할 수 있습니다.

5. 간단한 공유 버튼

짧고 간결하며 요점까지 이러한 공유 버튼을 가장 잘 설명합니다.

Ionicons 아이콘 세트의 간단한 SVG 아이콘을 사용합니다. 그러나 이러한 작업을 수행하기 위해 Ionic이나 JavaScript가 필요하지 않습니다.

대신 브라우저에서 바로 공유 링크를 열기 위해 새 탭 옵션과 함께 href 값을 사용합니다. JavaScript가 필요없고 투박한 SVG가 필요하지 않습니다.

Ionic 아이콘 세트를 자세히 살펴보면 추가하고 싶은 다른 소셜 아이콘도 찾을 수 있습니다. 또한 CSS의 스타일을 완전히 제어할 수 있으므로 크기, 패딩, 글꼴 색상 및 기타 거의 모든 것을 변경할 수 있습니다.

6. 숨겨진 사교

개발자 Chris Sevilleja는 이 숨겨진 소셜 버튼을 모두 순수 CSS로 만들었습니다.

일부 웹 사이트는 이 기술을 사용하여 더 작은 아이콘 안에 기본 공유 배지를 포함합니다. 그러나 분명히 이것은 독특한 애니메이션이므로 매우 일반적인 추세는 아닙니다.

코드는 설정하기 정말 쉽고 CSS를 통해 모두 실행되므로 완전히 제어할 수 있습니다. Chris는 Google+ 소셜 배지용으로 비슷한 펜을 개발하기도 했습니다.

두 코드 스니펫 모두 거의 모든 웹사이트에 적합하며 애니메이션은 모든 CSS3 호환 브라우저에서 실행됩니다.

7. 호버 배경색

이제 마우스를 가져가는 버튼에 따라 배경색이 변경되는 정말 독특한 소셜 공유 설정이 있습니다.

각 버튼에는 Font Awesome에서 가져온 고유한 사용자 지정 아이콘이 있으므로 이 세트를 확장하여 다른 관련 아이콘을 포함할 수도 있습니다. 호버 변경 사항에 대한 JavaScript 대체 기능이 있기 때문에 이 접근 방식도 매우 마음에 듭니다.

그러나 웹 개발자 Christopher Grabinski는 지원되는 브라우저에서 정확히 동일하게 작동하는 순수한 CSS 대안을 만들었습니다.

나는 이 기술이 더 작은 사이트나 짧은 블로그 게시물에서 작동할 수 있지만 더 큰 블로그에서는 멋지게 보일 것이라고 생각하지 않습니다.

8. 플라이아웃 공유

개발자 Kyle Lavery는 머티리얼 플라이아웃에 대한 Google의 접근 방식을 연상시키는 놀라운 플라이아웃 공유 버튼을 만들었습니다.

이것은 약간의 JavaScript를 사용하지만 5줄에 불과하며 그다지 복잡하지 않습니다. 애니메이션 마술은 필요에 맞게 사용자 정의할 수 있는 CSS에 있습니다.

또한 흥미로운 점은 원시 HTML이 엄청나게 간단하다는 것입니다. 하나의 기본 공유 컨테이너가 있고 버튼에 div 요소를 사용합니다. 기본적으로 5줄의 HTML과 5줄의 JavaScript가 CSS 전체와 혼합되어 이 멋진 효과를 제공합니다.

내가 본 것 중 가장 멋진 소셜 공유 기능 중 하나이며 머티리얼 디자인 스타일이 더 시원합니다.

9. 3D 공유 버튼

내 컬렉션의 마지막은 소셜 버튼과 함께 CSS 3D 변환을 사용하는 이 3D 디자인입니다.

개발자 Fabrizio Bianchi는 아이콘에서 변환 애니메이션에 이르기까지 순수 CSS를 사용하여 이러한 버튼을 만들었습니다. 주요 아이콘은 Font Awesome에서 가져왔으며 유일한 JS 코드는 내부에 버튼을 포함하기 위한 것입니다.

그러나 전반적으로 이것은 모든 사이트에서 잘 작동하는 순수한 CSS 솔루션입니다. 모든 사람이 3D 효과를 좋아하는 것은 아니지만 디자인에 적합하다면 선택하십시오.