툴팁이 있는 소셜 미디어 버튼

툴팁이 있는 소셜 미디어 버튼

이 게시물에서는 HTML 및 CSS만 사용하여 가리키면 도구 설명이 있는 소셜 미디어 버튼을 만드는 방법을 배웁니다. 이전에 블로그를 공유했으며 이제 소셜 미디어 버튼 또는 아이콘에 대한 도구 설명을 만들 것입니다.

소셜 미디어 버튼을 사용하면 웹사이트 방문자와 콘텐츠 뷰어가 소셜 미디어 연결 및 네트워크를 통해 콘텐츠를 쉽게 공유할 수 있습니다. 도구 설명은 사용자가 요소와 상호 작용할 때 표시되는 짧고 유익한 메시지입니다.

이 프로그램에서 Social Media Buttons with Tooltip , 먼저 웹 페이지에는 Facebook, Twitter, Instagram, Dribble 및 Linkedin의 5가지 소셜 미디어 버튼이 있습니다. 특정 버튼이나 아이콘 위로 마우스를 가져가면 슬라이딩 애니메이션과 함께 툴팁이 나타납니다. 도구 설명 안에는 이미지에서 본 것처럼 마우스를 가져간 특정 소셜 미디어 아이콘의 이름이 있습니다.

이제 두 개의 파일이 필요합니다. 하나는 HTML이고 다른 하나는 CSS입니다. 또는 간단히 HTML 파일에 CSS를 추가할 수 있습니다.

HTML 코드:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="soft-icons">
 <a class="soft-icon soft-icon--facebook">
    <i class="fa fa-facebook"></i>
    <div class="tooltip">Facebook</div>
  </a>
  <a class="soft-icon soft-icon--twitter">
    <i class="fa fa-twitter"></i>
    <div class="tooltip">Twitter</div>
  </a>
  <a class="soft-icon soft-icon--dribbble">
    <i class="fa fa-dribbble"></i>
    <div class="tooltip">Dribbble</div>
  </a>
  <a class="soft-icon soft-icon--instagram">
    <i class="fa fa-instagram"></i>
    <div class="tooltip">Instagram</div>
  </a>
  <a class="soft-icon soft-icon--linkedin">
    <i class="fa fa-linkedin"></i>
    <div class="tooltip">LinkedIn</div>
  </a>
</div>

CSS 코드:

<style>
.tooltip {  display: block;  position: absolute;  top: 0;  left: 50%;  padding: 0.8rem 1rem;
  border-radius: 40px;  font-size: 0.8rem;  font-weight: bold;  opacity: 0;  pointer-events: none;
  text-transform: uppercase;  transform: translate(-50%, -100%);  transition: all 0.3s ease;  z-index: 1;}

.tooltip:after {display: block; position: absolute;  bottom: 1px;
  left: 50%;  width: 0;  height: 0;  content: "";  border: solid;
  border-width: 10px 10px 0 10px;  border-color: transparent;
  transform: translate(-50%, 100%);}

.soft-icons {  display: flex;  align-items: center;  justify-content: center;  min-height: 100vh;}

.soft-icon {  display: flex;  align-items: center;  justify-content: center;  position: relative;
  width: 80px;  height: 80px;  margin: 0 0.5rem;  border-radius: 50%;  cursor: pointer;  font-size: 2.5rem;
  text-decoration: none;  transition: all 0.15s ease;}

.soft-icon:hover {  color: #fff;}

.soft-icon:hover .tooltip {  visibility: visible;  opacity: 1;  transform: translate(-50%, -150%);}

.soft-icon:active {  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset;}

.soft-icon--linkedin {  background: #006599;  color: #fff;}

.soft-icon--linkedin .tooltip {  background: #006599;  color: currentColor;}

.soft-icon--linkedin .tooltip:after {  border-top-color: #006599;}

.soft-icon--twitter {  background: #2b97f1;  color: #fff;}

.soft-icon--twitter .tooltip {  background: #2b97f1;  color: currentColor;}

.soft-icon--twitter .tooltip:after {  border-top-color: #2b97f1;}

.soft-icon--codepen {  background: #000;  color: #fff;}

.soft-icon--facebook {  background: #3b5a9b;  color: #fff;}

.soft-icon--facebook .tooltip {  background: #3b5a9b;  color: currentColor;}

.soft-icon--facebook .tooltip:after {  border-top-color: #3b5a9b;}

.soft-icon--instagram {  background: #527fa6;  color: #fff;}

.soft-icon--instagram .tooltip {  background: #527fa6;  color: currentColor;}

.soft-icon--instagram .tooltip:after {  border-top-color: #527fa6;}

.soft-icon--dribbble {  background: #ef5a92;  color: #fff;}

.soft-icon--dribbble .tooltip {  background: #ef5a92;  color: currentColor;}

.soft-icon--dribbble .tooltip:after {  border-top-color: #ef5a92;}

.soft-icon i {
  position: relative;
  top: 1px;
}
</style>

그게 다야. 보여주고 싶은 곳에 위의 HTML 및 CSS 코드를 추가할 수 있습니다. 블로그 게시물 하단에서와 같이. 또는 모든 웹 페이지. 위의 코드와 디자인에 어려움이 있는 경우 아래에서 논의하여 문제를 해결하는 데 도움을 줄 것입니다. 고맙습니다.