HTML 按钮

08-31 226阅读 0评论

步骤 1: 创建HTML文件

首先，创建一个新的HTML文件，例如 index.html。

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多个按钮</title>
    <style>
    /* 在这里添加CSS样式 */
    </style></head><body>
    <!-- 在这里添加按钮 --></body></html>

步骤 2: 添加按钮

在 <body> 标签内添加多个按钮，并为每个按钮设置一个唯一的类名。

<body>
    <a href="https://www.douyin.com" target="_blank" class="tiktok-button">抖音</a>
    <a href="https://www.taobao.com" target="_blank" class="taobao-button">淘宝</a>
    <a href="https://www.xiaohongshu.com" target="_blank" class="xiaohongshu-button">小红书</a>
    <a href="https://www.vip.com" target="_blank" class="weipinhui-button">唯品会</a>
    <a href="https://www.pinduoduo.com" target="_blank" class="pinduoduo-button">拼多多</a>
    <a href="https://www.tmall.com" target="_blank" class="tianmao-button">天猫</a>
    <a href="https://www.jd.com" target="_blank" class="jingdong-button">京东</a>
    <a href="https://www.kuaishou.com" target="_blank" class="kuaishou-button">快手</a>
    <a href="https://www.meituan.com" target="_blank" class="meituan-button">美团</a>
    <a href="https://www.ele.me" target="_blank" class="eleme-button">饿了么</a>
    <a href="https://www.suning.com" target="_blank" class="suningyigou-button">苏宁易购</a>
    <a href="https://you.163.com" target="_blank" class="wangyiyanxuan-button">网易严选</a>
    <a href="https://www.dangdang.com" target="_blank" class="dangdangwang-button">当当网</a>
    <a href="https://www.mogu.com" target="_blank" class="mogu-button">蘑菇街</a>
    <a href="https://www.jumei.com" target="_blank" class="jumeiyoupin-button">聚美优品</a>
    <a href="https://www.bilibili.com" target="_blank" class="bilibili-button">哔哩哔哩</a></body>

步骤 3: 添加CSS样式

在 <style> 标签内添加CSS样式，为每个按钮设置不同的颜色和悬停效果。

<style>
    .tiktok-button, .taobao-button, .xiaohongshu-button, .weipinhui-button, .pinduoduo-button, .tianmao-button, .jingdong-button, .kuaishou-button, .meituan-button, .eleme-button, .suningyigou-button, .wangyiyanxuan-button, .dangdangwang-button, .mogu-button, .jumeiyoupin-button, .bilibili-button {        display: inline-block;        padding: 10px 20px;        border: 2px solid rgba(128, 128, 128, 0.3); /* 灰色边框，透明度为0.3 */
        border-radius: 10px; /* 方形圆角框 */
        background-color: transparent; /* 背景为透明色 */
        font-size: 16px;        text-align: center;        width: 140px; 
        box-sizing: border-box;        transition: background-color 0.3s, border-color 0.3s, color 0.3s;        margin-right: 10px; /* 按钮之间的间距 */
        margin-bottom: 10px; /* 增加垂直间距 */
    }    .tiktok-button {        color: red; /* 开始是红色 */
    }    .taobao-button {        color: blue; /* 开始是蓝色 */
    }    .xiaohongshu-button {        color: #FF69B4; /* 随机一种彩色 */
    }    .weipinhui-button {        color: #8A2BE2; /* 随机一种彩色 */
    }    .pinduoduo-button {        color: #FFD700; /* 随机一种彩色 */
    }    .tianmao-button {        color: #008000; /* 随机一种彩色 */
    }    .jingdong-button {        color: #0000FF; /* 随机一种彩色 */
    }    .kuaishou-button {        color: #FFFF00; /* 随机一种彩色 */
    }    .meituan-button {        color: #000000; /* 随机一种彩色 */
    }    .eleme-button {        color: #8B4513; /* 随机一种彩色 */
    }    .suningyigou-button {        color: #808080; /* 随机一种彩色 */
    }    .wangyiyanxuan-button {        color: #008080; /* 随机一种彩色 */
    }    .dangdangwang-button {        color: #800000; /* 随机一种彩色 */
    }    .mogu-button {        color: #808000; /* 随机一种彩色 */
    }    .jumeiyoupin-button {        color: #000080; /* 随机一种彩色 */
    }    .bilibili-button {        color: #3A9B7C; /* 随机一种彩色 */
    }    .tiktok-button:hover {        background-color: red; /* 鼠标悬浮的时候背景色变成红色 */
        border-color: transparent; /* 边框变成透明色 */
        color: white; /* 鼠标悬浮的时候变成白色 */
    }    .taobao-button:hover {        background-color: blue; /* 鼠标悬浮的时候背景色变成蓝色 */
        border-color: transparent; /* 边框变成透明色 */
        color: white; /* 鼠标悬浮的时候变成白色 */
    }    .xiaohongshu-button:hover {        background-color: #FF69B4; /* 随机的一种彩色 */
        border-color: transparent;        color: white;
    }    .weipinhui-button:hover {        background-color: #8A2BE2; /* 随机的一种彩色 */
        border-color: transparent;        color: white;
    }    .pinduoduo-button:hover {        background-color: #FFD700; /* 随机的一种彩色 */
        border-color: transparent;        color: white;
    }    .tianmao-button:hover {        background-color: #008000; /* 随机的一种彩色 */
        border-color: transparent;        color: white;
    }    .jingdong-button:hover {        background-color: #0000FF; /* 随机的一种彩色 */
        border-color: transparent;        color: white;
    }    .kuaishou-button:hover {        background-color: #FFFF00; /* 随机的一种彩色 */
        border-color: transparent;        color: white;
    }     .meituan-button:hover {
        background-color: #000000; /* 随机的一种彩色 */
        border-color: transparent;
        color: white;
    }

    .eleme-button:hover {
        background-color: #8B4513; /* 随机的一种彩色 */
        border-color: transparent;
        color: white;
    }

    .suningyigou-button:hover {
        background-color: #808080; /* 随机的一种彩色 */
        border-color: transparent;
        color: white;
    }

    .wangyiyanxuan-button:hover {
        background-color: #008080; /* 随机的一种彩色 */
        border-color: transparent;
        color: white;
    }

    .dangdangwang-button:hover {
        background-color: #800000; /* 随机的一种彩色 */
        border-color: transparent;
        color: white;
    }

    .mogu-button:hover {
        background-color: #808000; /* 随机的一种彩色 */
        border-color: transparent;
        color: white;
    }

    .jumeiyoupin-button:hover {
        background-color: #000080; /* 随机的一种彩色 */
        border-color: transparent;
        color: white;
    }

    .bilibili-button:hover {
        background-color: #3A9B7C; /* 随机的一种彩色 */
        border-color: transparent;
        color: white;
    }</style>

完整代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>多个按钮</title>

    <style>

    .tiktok-button, .taobao-button, .xiaohongshu-button, .weipinhui-button, .pinduoduo-button, .tianmao-button, .jingdong-button, .kuaishou-button, .meituan-button, .eleme-button, .suningyigou-button, .wangyiyanxuan-button, .dangdangwang-button, .mogu-button, .jumeiyoupin-button, .bilibili-button {

    display: inline-block;

    padding: 10px 20px;

    border: 2px solid rgba(128, 128, 128, 0.3); /* 灰色边框，透明度为0.3 */

    border-radius: 10px; /* 方形圆角框 */

    background-color: transparent; /* 背景为透明色 */

    font-size: 16px;

    text-align: center;

    width: 140px; 

    box-sizing: border-box;

    transition: background-color 0.3s, border-color 0.3s, color 0.3s;

    margin-right: 10px; /* 按钮之间的间距 */

    margin-bottom: 10px; /* 增加垂直间距 */

}


        .tiktok-button {

            color: red; /* 开始是红色 */

        }


        .taobao-button {

            color: blue; /* 开始是蓝色 */

        }

       .xiaohongshu-button {

    color: #FF69B4; /* 随机一种彩色 */

}

.weipinhui-button {

    color: #8A2BE2; /* 随机一种彩色 */

}

.pinduoduo-button {

    color: #FFD700; /* 随机一种彩色 */

}

.tianmao-button {

    color: #008000; /* 随机一种彩色 */

}

.jingdong-button {

    color: #0000FF; /* 随机一种彩色 */

}

.kuaishou-button {

    color: #FFFF00; /* 随机一种彩色 */

}

.meituan-button {

    color: #000000; /* 随机一种彩色 */

}

.eleme-button {

    color: #8B4513; /* 随机一种彩色 */

}

.suningyigou-button {

    color: #808080; /* 随机一种彩色 */

}

.wangyiyanxuan-button {

    color: #008080; /* 随机一种彩色 */

}

.dangdangwang-button {

    color: #800000; /* 随机一种彩色 */

}

.mogu-button {

    color: #808000; /* 随机一种彩色 */

}

.jumeiyoupin-button {

    color: #000080; /* 随机一种彩色 */

}

 .bilibili-button{

    color: ##3A9B7C; /* 随机一种彩色 */

}

        .tiktok-button:hover {

            background-color: red; /* 鼠标悬浮的时候背景色变成红色 */

            border-color: transparent; /* 边框变成透明色 */

            color: white; /* 鼠标悬浮的时候变成白色 */

        }


        .taobao-button:hover {

            background-color: blue; /* 鼠标悬浮的时候背景色变成蓝色 */

            border-color: transparent; /* 边框变成透明色 */

            color: white; /* 鼠标悬浮的时候变成白色 */

        }

        .xiaohongshu-button:hover {

    background-color: #FF69B4; /* 随机的一种彩色 */

    border-color: transparent;

    color: white;

}

.weipinhui-button:hover {

    background-color: #8A2BE2; /* 随机的一种彩色 */

    border-color: transparent;

    color: white;

}

.pinduoduo-button:hover {

    background-color: #FFD700; /* 随机的一种彩色 */

    border-color: transparent;

    color: white;

}

.tianmao-button:hover {

    background-color: #008000; /* 随机的一种彩色 */

    border-color: transparent;

    color: white;

}

.jingdong-button:hover {

    background-color: #0000FF; /* 随机的一种彩色 */

    border-color: transparent;

    color: white;

}

.kuaishou-button:hover {

    background-color: #FFFF00; /* 随机的一种彩色 */

    border-color: transparent;

    color: white;

}

.meituan-button:hover {

    background-color: #000000; /* 随机的一种彩色 */

    border-color: transparent;

    color: white;

}

.eleme-button:hover {

    background-color: #8B4513; /* 随机的一种彩色 */

    border-color: transparent;

    color: white;

}

.suningyigou-button:hover {

    background-color: #808080; /* 随机的一种彩色 */

    border-color: transparent;

    color: white;

}

.wangyiyanxuan-button:hover {

    background-color: #008080; /* 随机的一种彩色 */

    border-color: transparent;

    color: white;

}

.dangdangwang-button:hover {

    background-color: #800000; /* 随机的一种彩色 */

    border-color: transparent;

    color: white;

}

.mogu-button:hover {

    background-color: #808000; /* 随机的一种彩色 */

    border-color: transparent;

    color: white;

}

.jumeiyoupin-button:hover {

    background-color: #000080; /* 随机的一种彩色 */

    border-color: transparent;

    color: white;

}

.bilibili-button:hover {

    background-color: #3A9B7C; /* 随机的一种彩色 */

    border-color: transparent;

    color: white;

}

    </style>

</head>

<body>

    <a href="https://www.douyin.com" target="_blank">抖音</a>

    <a href="https://www.taobao.com" target="_blank">淘宝</a>

    <a href="https://www.xiaohongshu.com" target="_blank">小红书</a>

<a href="https://www.vip.com" target="_blank">唯品会</a>

<a href="https://www.pinduoduo.com" target="_blank">拼多多</a>

<a href="https://www.tmall.com" target="_blank">天猫</a>

<a href="https://www.jd.com" target="_blank">京东</a>

<a href="https://www.kuaishou.com" target="_blank">快手</a>

<a href="https://www.meituan.com" target="_blank">美团</a>

<a href="https://www.ele.me" target="_blank">饿了么</a>

<a href="https://www.suning.com" target="_blank">苏宁易购</a>

<a href="https://you.163.com" target="_blank">网易严选</a>

<a href="https://www.dangdang.com" target="_blank">当当网</a>

<a href="https://www.mogu.com" target="_blank">蘑菇街</a>

<a href="https://www.jumei.com" target="_blank">聚美优品</a>

<a href="https://www.bilibili.com" target="_blank">哔哩哔哩</a>

</body>

</html>


打赏
收藏
点赞
文章版权声明：除非注明，否则均为温馨小家原创文章，转载或复制请以超链接形式并注明出处。

相关阅读

发表评论

快捷回复： 表情：
评论列表 （暂无评论，226人围观）

还没有评论，来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码