如何使用HTML和CSS创建具有不同社交媒体账户的分享按钮

在本文章中，我们将创建一个分享按钮，当我们点击按钮时，它会显示可以分享特定内容的社交媒体账户。

教学方法:

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

HTML代码:

首先，创建一个HTML文件（index.html）。
然后，我们将CSS文件链接到我们的HTML上，为其提供了所有动画效果。这也放在了<head>标签之间。
接下来是HTML代码的body部分。
1. 我们必须添加不同的社交媒体图标。
2. 在body标签的末尾，我们需要添加两个<script>标签，一个用于我们的index.js文件，另一个用于我们在网页上使用的图标。

CSS代码: CSS用于为我们的HTML页面提供不同类型的动画和效果，使其对所有用户都具备交互性。

使用CSS需要记住以下几点:

恢复所有浏览器效果。
使用类和ID为HTML元素添加效果。
使用:hover来使用悬停效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
 
    <script src=
"https://kit.fontawesome.com/704ff50790.js"
            crossorigin="anonymous">
    </script>
 
    <script src="index.js"></script>
</head>
 
<body>
    <div class="main_box">
        <input type="checkbox" id="share_button">
        <label for="share_button">
            <span class="sharebtn">
                <i class="far fa-share-square"></i>
            </span>
        </label>
 
        <div class="sm_list">
            <a href="#" class="facebook">
                <i class="fab fa-facebook-f"></i>
            </a>
            <a href="#" class="instagram">
                <i class="fab fa-instagram"></i>
            </a>
            <a href="#" class="linkedin">
                <i class="fab fa-linkedin-in"></i>
            </a>
            <a href="#" class="discord">
                <i class="fab fa-discord"></i>
            </a>
            <a href="#" class="whatsapp">
                <i class="fab fa-whatsapp"></i>
            </a>
            <a href="#" class="slack">
                <i class="fab fa-slack"></i>
            </a>
        </div>
    </div>
</body>
</html>

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 
let 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 =
            '<i class="far fa-share-square"></i>'
    } else {
        sharebtn.innerHTML =
            '<i class="fas fa-times"></i>'
    }
})

输出：

如何使用HTML和CSS创建具有不同社交媒体账户的分享按钮