2022년 HTML5 및 부트스트랩 소셜 미디어 버튼 20개
게시 됨: 2022-07-15이 최고의(그리고 가장 멋진) 소셜 버튼 템플릿을 무료로 사용하여 소셜 네트워크의 잠재력을 활용하십시오.
우리는 웹에서 사용 가능한 많은 버튼과 아이콘을 검토했지만 이 21개로 해결했습니다.
이 컬렉션의 다양성으로 인해 올바른 스타일을 쉽게 찾을 수 있습니다.
여기서 끝이 아닙니다.
원하는 경우 비즈니스 및 웹 사이트에 따라 미화하고 브랜드화할 수도 있습니다.
사회적 공유의 효과는 매우 긍정적인 결과 를 가져올 수 있습니다. 우리는 페이스북, 인스타그램 등에서 그다지 인기가 없을 수도 있는 틈새 시장에서도 그것을 직접 목격했습니다.
이 Bootstrap 소셜 버튼을 사용하여 원하는 모든 것을 공유할 수 있습니다.
친해지기!
부트스트랩 버튼 V15
다양한 버튼 변형이 있지만 가장 도움이 되는 버튼만 포함하기로 결정했습니다. 또한 키트에는 소셜 미디어 버튼뿐만 아니라 여러 버튼이 포함되어 있습니다.
당신은 큰 시간을 WIN.
Bootstrap Buttons V15는 아마도 목록에서 내가 가장 좋아하는 세트일 것입니다. 소셜 버튼은 마우스를 가져가면 사라지는 멋진 그림자 효과와 함께 두 가지 형식으로 제공됩니다.
부트스트랩 버튼 V18
Bootstrap Buttons V18은 다른 버튼과 매우 다른 다양한 버튼의 모음입니다. 그래도 좀 더 전통적인 방법도 있으므로 원하는 경로를 선택할 수 있습니다.
처음에는 눈치채지 못하더라도 각 버튼에는 멋진 클릭 효과 (사라짐)를 만드는 그림자도 포함되어 있습니다.
라이브 데모 미리보기 페이지를 방문하여 직접 사용해 볼 수 있습니다.
부트스트랩 버튼 V13
Bootstrap Buttons V13은 어두운 배경에 있지만 다른 배경 스타일과 함께 사용할 수 있습니다. 항상 기본 구성을 따를 필요는 없습니다.
곡물에 대해 자유롭게 이동하십시오.
여기에서 다양한 소셜 미디어 버튼 스타일을 얻을 수 있으므로 가장 적합한 디자인을 찾을 수 있을 것입니다. 반은 단색으로, 반은 윤곽선으로만 제공됩니다.
부트스트랩 버튼 V01
웹사이트나 블로그에 빠르게 통합 할 수 있는 간단하고 다양한 HTML 소셜 버튼 번들입니다. 각 소셜 플랫폼의 브랜딩을 따르므로 그대로 사용하셔도 됩니다.
단색 구조의 변형과 윤곽만 있는 변형도 있습니다.
또한 두 버전 모두 그림자를 제거하여 작동하는 CLICK 효과가 있습니다.
Colorlib의 멋진 평면 소셜 버튼 애니메이션
Colorlib는 Fancy Flat Animated 소셜 아이콘 세트를 통해 멋진 CSS3 애니메이션을 다음 단계로 끌어 올립니다. 주요 LinkedIn, Twitter, Instagram, Youtube, Github 및 Facebook 소셜 네트워크 아이콘 이 기본 제공되는 간단한 정사각형 배경 입니다.
원하는 대로 사용할 수 있는 Font Awesome 라이브러리 덕분에 다른 많은 아이콘도 사용할 수 있습니다.
각 아이콘 위에 마우스를 올리거나 클릭하면 아이콘을 기본 사각형이 아닌 원으로 바꾸는 특정 ANIMATION이 트리거됩니다. 이는 이미 역동적이고 상호작용적인 웹사이트에 멋진 추가 기능이 될 수 있습니다.
Sass로 애니메이션화된 소셜 버튼
다음으로 각 아이콘에 대한 특정 툴팁 을 제공하는 Colorlib의 SASS 애니메이션 소셜 아이콘 세트가 있습니다.
예를 들어 누군가가 아이콘 중 하나에 마우스를 가져갈 때마다 이 아이콘이 무엇인지 알려주는 알림 툴팁을 즉시 받게 됩니다. 아이디어와 메시지를 반영하도록 완전히 사용자 정의하거나 소셜 네트워크를 지정하여 기본값으로 둘 수 있습니다.
아이콘은 GitHub, 이메일, Facebook, LinkedIn, Twitter, Instagram, Youtube 및 Font Awesome 을 기반으로 하는 기타 소셜 네트워크에서도 사용할 수 있습니다.
또한 기본 색 구성표는 흰색 아이콘 텍스트가 있는 회색 배경입니다.
Font Awesome Social Buttons Powered by Bootstrap
마지막으로 웹에서 매우 인기 있는 두 가지 프레임워크인 Bootstrap과 Font Awesome의 조합이 있습니다.
그 두 사람이 아기를 가졌을 때 Stan Williams 이외의 다른 사람에게서이 멋진 아이콘 세트를 얻을 수 있다고 상상해보십시오. 이 아이콘은 GitHub, Apple, Android, Skype 및 Stack Overflow와 수백 개의 아이콘으로 구성된 전체 Font Awesome 라이브러리까지 확장됩니다.
당신의 사회적 요구에 대한 색상과 STRICT 문장이 필요한 경우 획득하기 위한 세트입니다.
Colorlib의 최소 CSS/HTML 소셜 버튼
다음은 Colorlib의 깔끔한 소셜 아이콘입니다. 이 세트에는 Facebook, Twitter, Instagram, Youtube, Behance 등을 위한 회색 아이콘 세트가 있습니다.
Colorlib는 아이콘을 더 작게 보이게 하고 디자인 내에서 훨씬 쉽게 통합할 수 있도록 쉽게 제거할 수 있는 테두리 를 추가했습니다.
그러나 항상 테두리를 제거하고 원하는 아이콘을 사용할 수 있습니다. 예를 들어, 바닥글 또는 머리글 탐색 메뉴 또는 콘텐츠 영역 내에서.
슬라이딩 호버가 있는 소셜 버튼
웹의 진화, 특히 CSS3 및 HTML5와 같은 언어의 디자인 측면을 보는 것은 정말 좋습니다. Colorlib에서 제공하는 아름답고 현대적인 아이콘 세트입니다.
이 세트는 4개의 주요 소셜 네트워크(LinkedIn, Twitter 및 Facebook)를 아름다운 색상 배열과 아이콘을 보관할 수 있는 박스형 레이아웃 케이스로 제공합니다.
호버 효과는 기본 소셜 네트워크 공유 위젯을 더 매력적인 소셜 아이콘으로 가릴 수 있도록 제작되었습니다.
아이콘의 귀하의 버전 위로 마우스를 가져가면 사용자는 실제 공유 횟수와 함께 직접 좋아요, 공유 및 트윗 버튼을 볼 수 있습니다!
소셜 버튼 공유
Colorlib는 HTML5를 사용하여 매우 깔끔한 기능을 제공하는 매우 가벼운 소셜 공유 버튼 세트를 공유하고 있습니다.
귀하의 사이트에 추가할 간단한 '공유 아이콘' 위젯을 얻을 수 있지만 위젯을 클릭하면 많은 소셜 네트워킹 사이트 EXPANDS를 사용하여 콘텐츠를 공유하거나 자신의 소셜 미디어 프로필을 홍보할 수 있습니다.
일반적인 Colorlib 방식으로 이러한 아이콘에는 100개의 아이콘이 모두 포함된 전체 Font Awesome 라이브러리가 함께 제공됩니다.
세련된 소셜 버튼
Chris Deacy는 아이콘과 사용자 간의 최대 상호 작용을 위해 호버 배경 효과를 제공하는 세련된 소셜 아이콘 세트를 제공합니다.
각 소셜 아이콘 세트는 많은 소셜 네트워크별 아이콘을 제공하며 이 아이콘에서 Twitter, Facebook, Skype 및 Dribble을 찾습니다.
아이콘 중 하나 위로 마우스를 가져갈 때마다 아이콘의 배경이 각 소셜 네트워크의 가장 지배적인 색상으로 채워집니다.
눈에 띄지 않을 꽤 멋진 기능!
HTML만 사용하는 소셜 버튼
OstrIO의 HTML 전용 소셜 아이콘 세트는 최소한의 웹사이트를 위한 가벼운 소셜 미디어 공유 솔루션이 필요한 웹마스터, 디자이너 및 개발자를 위한 완벽한 솔루션입니다.
우리는 또한 이러한 아이콘이 모든 규모의 프로젝트에 도움이 될 것이라는 데 동의하므로 HTML 전용 개념으로 자신을 제한하지 마십시오.
또한 이 세트에는 4가지 크기 세트가 있어 모든 크기와 형태의 웹사이트에 매우 쉽게 통합할 수 있습니다.
소셜 미디어 아이콘의 가용성은 Pinterest에서 VKontakte, Facebook 및 Twitter 및 기타에 이르기까지 다양합니다.
애니메이션 소셜 미디어 버튼
이 소셜 미디어 버튼에는 깔끔한 애니메이션 이 있지만 멋진 그라디언트 효과도 있습니다. 귀하의 웹사이트나 블로그에 방문하면 모든 방문자가 의심의 여지 없이 이를 알아차릴 것입니다.
그리고 그들이 그들 위로 떠오르면 흥분은 지붕을 통해 갈 것입니다.
왜요? 내가 당신에게 한 가지를 말해주기 때문에 – 그들은 그것을 기대하지 않았습니다!
온라인 존재가 깔끔한 것을 좋아하더라도 소셜 미디어 아이콘과 같은 작은 세부 사항으로 항상 항목을 강화할 수 있습니다.
그들은 당신의 페이지를 드라마로 지나치게 복잡하게 만들지 않고 오히려 경험을 향상시킵니다.
애니메이션 소셜 아이콘
더 많은 애니메이션 소셜 미디어 아이콘이 제공됩니다. 이 특정 컬렉션은 Facebook 또는 Twitter, Pinterest 또는 YouTube 등 모든 아이콘에 대해 동일한 효과를 제공합니다.
마우스 커서로 마우스를 가져가면 순환 합니다. 이 템플릿은 좀 더 기본적인 것에 대한 트릭을 수행합니다.
웹 사이트, 블로그 또는 온라인 상점에 지루하지 않은 소셜 미디어 아이콘을 사용하십시오.
이것들은 한푼도 들지 않으므로 손을 잡고 페이지에서 항목을 테스트하여 페이지를 얼마나 잘 장식하는지 확인하십시오. 멋진 결과를 위한 작은 노력.
CSS 소셜 버튼 및 아이콘
우리 목록에 있는 많은 아이콘 세트는 이미 정말 놀랍고 수백만 웹 사용자에게 훌륭한 소셜 공유 경험을 제공할 것이라는 점을 인정합니다.
이 거대한 CSS3 소셜 버튼 및 아이콘 세트는 웹사이트, 앱, 프로젝트, 블로그 등에 소셜 미디어 정보를 표시하는 방식에 혁명 을 일으킬 것입니다.
단순한 Evernote 버튼부터 "Read More at Smashing Magazine" 또는 "Available on the App Store" 등과 같은 더 많은 기술 버튼에 이르기까지.
이러한 종류의 아이콘은 콘텐츠에 캐릭터를 추가합니다. 이것은 또한 소셜 공유 및 판매 기회를 증가시킬 것입니다.
원형 소셜 버튼
사각형 아이콘은 현재 소셜 아이콘 세트 시장에서 매우 지배적입니다.
Shahnur Alam은 가장 인기 있는 소셜 네트워크에 대해 방대한 수의 둥근 소셜 아이콘을 제공(자신을 구축)하여 이러한 변화를 돕고자 합니다.
이 특정 세트는 MINIMALISTIC 작가 사이트, 개인 저널 등에 나타납니다.
아이콘 글꼴이 있는 소셜 버튼
David Pottrell은 오랫동안 개발 및 공유해 왔습니다. 내장 아이콘 글꼴로 설정된 그의 소셜 버튼은 이러한 아이콘 세트 개념을 가장 매끄럽게 실행 한 것 중 하나입니다.
David의 비전은 적절한 색 구성표로 소셜 아이콘 솔루션을 제공하는 것입니다. 무엇보다도 그는 각 요소 옆에 브랜드 아이콘 글꼴을 추가합니다. 이 ACTION은 각 아이콘의 진위 여부에 대한 거래를 봉인합니다.
David가 주목하고 있는 HTML5 및 CSS3 기술에 감탄했습니다.
CSS3 전환 기능이 있는 FLAT 뷰티 소셜 버튼
FLAT 디자인은 여기에서 우리의 요약에서 일관되지 않았습니다. 그러나 우리는 SMTashrik Anam의 진정으로 훌륭하고 아름다운 작품을 소개함으로써 이를 수정하려고 노력할 것입니다.
그는 CSS3 TRANSITION EFFECTS를 사용하여 역동적이고 상호작용적인 소셜 공유 경험을 증폭하는 아이콘을 제공하고자 합니다.
각 아이콘 위에 마우스를 올려 놓고 선택한 특정 텍스트를 찾기 위해 아이콘이 어떻게 펼쳐지는지 살펴보세요.
단순한 CSS 소셜 버튼
단순함은 결코 실망시키지 않습니다. 일부 사람들은 이 특정 세트를 현대적이고 다소 복잡한 세트라고 부를 수도 있습니다. 우리는 이것이 지금까지 우리 목록에 있는 가장 단순한 소셜 세트 중 하나라고 진정으로 믿습니다.
콘텐츠 페이지 내에서 소셜 공유 버튼을 직접 사용하는 대신 이 템플릿을 사용할 수 있습니다. 이것은 프로필을 홍보하려는 상황에서 특히 잘 작동합니다. 이 번들은 Forrst, Dribbble, Flickr, Designmoo 등을 지원합니다.
시간을 할애하여 최종 결정을 내리기 전에 확인하고 사이트에서 테스트해 보십시오.
소셜 버튼 롤오버
롤오버 아이콘 세트에는 Soundcloud, Pinterest, Facebook, YouTube 및 Twitter 아이콘이 있습니다.
이 아이콘을 사용하면 롤오버 텍스트 를 삽입할 수 있습니다. 이 텍스트는 방문자가 이 세트의 아이콘 중 하나를 롤오버할 때마다 나타납니다.
Hugo Darby-Brown이 이것을 만들었습니다. 그는 순수한 CSS3 기술을 사용하여 이 템플릿을 만들고 원활한 공유 경험을 제공했습니다.
위에 나열된 HTML/CSS 기반 소셜 아이콘. Adobe Photoshop, Illustrator 등에서 사용할 수 있는 것을 찾고 있다면 이 아이콘 모음을 확인하는 것이 좋습니다.
게시물이 마음에 들면 알려주세요.