如何使用 HTML 和 CSS 创建具有不同社交句柄的共享按钮？

在本文中，我们将创建一个共享按钮，当我们单击该按钮时，该按钮会显示社交媒体帐户以共享特定内容。

方法：

• 创建一个 HTML 文件，我们将在其中添加不同类型的社交媒体图标。
• 创建一个 CSS 样式，为网页元素提供一些动画效果。
• 创建一个 JS 文件，用于添加可以检测鼠标单击事件的事件侦听器。

HTML代码：

1. 首先，创建一个 HTML 文件（index.html）。
2. 然后我们将提供所有动画效果的 CSS 文件链接到我们的 HTML。这也位于 标记之间。
3. 来到我们 HTML 代码的正文部分。
   1. 我们必须添加不同的社交媒体图标。
   2. 在 body 标签的末尾，我们必须添加 2 个                
                                                                                     

                                                                                                                                                                                                                                                                    

          
        

---

CSS

/* Restoring browsering effects */
*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
  
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}
  
.main_box{
    width: 4em;
    height: 4em;
    position: relative;
}
  
#share_button{
    display: none;
}
  
span,a{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
  
span{
    width: 4em;
    height: 4em;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #eee;
    color: #333;
    font-size: 2em;
    z-index: 1;
    cursor: pointer;
    /* border-radius: 30%; */
}
  
.sm_list{
    width: 4em;
    height: 4em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
  
.sm_list a{
    width: 4em;
    height: 4em;
    border-radius: 50%;
    text-decoration: none;
    color: #fff;
    transition: all .3s;
    font-size: 1.5em;
}
  
#share_button:checked ~ .sm_list a:nth-child(1){
    background-color: #3B5998;
    transition-delay: 0.2s;
    transform: translateX(-6em);
}
  
#share_button:checked ~ .sm_list a:nth-child(2){
    background-color: #dd2553;
    transition-delay: 0.2s;
    transform: translateX(6em);
}
  
#share_button:checked ~ .sm_list a:nth-child(3){
    background-color: #000f94;
    transition-delay: 0.3s;
    transform: translateX(12em);
}
  
#share_button:checked ~ .sm_list a:nth-child(4){
    background-color: #1077ec;
    transition-delay: 0.3s;
    transform: translateX(-12em);
}
  
#share_button:checked ~ .sm_list a:nth-child(5){
    background-color: rgb(10, 63, 0);
    transition-delay: 0.4s;
    transform: translateX(18em);
}
  
#share_button:checked ~ .sm_list a:nth-child(6){
    background: linear-gradient(70deg,blue,green,red,yellow);
    transition-delay: 0.4s;
    transform: translateX(-18em);
}
  
/* Hovering Effects */
#share_button:checked ~ .sm_list a:nth-child(1):hover{
    background-color: #ffffff;
    color: #3B5998;
    /* transition-delay: 0.2s;
    transform: translateX(-6em); */
}
  
#share_button:checked ~ .sm_list a:nth-child(2):hover{
    color: #dd2553;
    background-color: #fff;
}
  
#share_button:checked ~ .sm_list a:nth-child(3):hover{
    color: #000f94;
    background-color: #fff;
}
  
#share_button:checked ~ .sm_list a:nth-child(4):hover{
    color: #1077ec;
    background-color: #fff;
}
  
#share_button:checked ~ .sm_list a:nth-child(5):hover{
    color: rgb(10, 63, 0);
    background-color: #fff;
}
  
#share_button:checked ~ .sm_list a:nth-child(6):hover{
    color: black;
    background-image: linear-gradient(90deg,white,grey);
}
  
span:visited{
    background-color: #000f94;
}

Javascript

// Selecting the html class and  
// convert it to an object
  
const sharebtn = 
    document.querySelector('.sharebtn')
  
// Creating a bool variable for changing
// the image of share button 
var bool = 0
  
// Adding an event listener
sharebtn.addEventListener('click', () => {
  
    // As we clicked the mouse over
    // the share button the bool value.
    //  get flipped and then working of
    // if-else loop get starts
    bool = !bool
      
    if (bool == 0) {
        sharebtn.innerHTML =
            ''
    } else {
        sharebtn.innerHTML =
            ''
    }
})