html+css 炫酷的流边按钮

news2025/1/10 17:11:14

前言：哈喽，大家好，今天给大家分享html+css 绚丽效果！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

文章目录

一、效果
二、原理解析
- 1.给每一个按钮添加==一个hover效果==，当鼠标移动上去时==改变按钮的效果==。
- 2.当按钮上有鼠标时，==hover效果触发==。
- - 2.1stroke-dasharray介绍
  - 2.2stroke-dashoffset介绍
- 3.具体的变换参数，直接==看代码==，可以一键复制，查看效果
三、上代码，可以直接复制使用
- 目录
- html
- css

一、效果

流边按钮

二、原理解析

1.给每一个按钮添加一个hover效果，当鼠标移动上去时改变按钮的效果。

按钮文字的居中显示

2.当按钮上有鼠标时，hover效果触发。

/* 鼠标悬停时改变线条样式 */
.button:hover .shape {
    stroke: #06e6a0;
    stroke-width: 3;
    stroke-dasharray: 50 0;
    stroke-dashoffset: 0;
}

2.1stroke-dasharray介绍

stroke-dasharray解释

2.2stroke-dashoffset介绍

stroke-dashoffset用法

3.具体的变换参数，直接看代码，可以一键复制，查看效果

三、上代码，可以直接复制使用

html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>html+css 炫酷的流边按钮</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>

<div class="container">
    <h1 style="text-align: center;color:#fff;margin-bottom: 50px;padding-top: 50px; text-shadow: 0 3px 3px #4c6ed3;">
        html+css 炫酷的流边按钮</h1>
    <div class="wrapper">
        <div class="button">
            <svg width="160" height="50">
                <rect class="shape" width="160" height="50"></rect>
                <div class="text">求点赞</div>
            </svg>
        </div>
        <div class="button">
            <svg width="160" height="50">
                <rect class="shape" width="160" height="50"></rect>
                <div class="text">求关注</div>
            </svg>
        </div>
        <div class="button">
            <svg width="160" height="50">
                <rect class="shape" width="160" height="50"></rect>
                <div class="text">求分享</div>
            </svg>
        </div>
    </div>


</div>
</body>

</html>

css

* {
    margin: 0;
    padding: 0;
}

.container {
    /* 方便演示，居中显示 */
    height: 100vh;
    background-color: #2c3e50;
}

.wrapper {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.button {
    /* 相对定位 */
    position: relative;
    width: 160px;
    height: 50px;
    margin: 0 15px;
    cursor: pointer;
}

.shape {
    /* 取消填充 */
    fill: none;
    /* 定义一条线 */
    stroke: #009ffd;
    /* 线的厚度 */
    stroke-width: 6;
    /* 设置虚线：虚线长度 间距 */
    stroke-dasharray: 100 400;
    /* 虚线偏移量 */
    stroke-dashoffset: -240;
    /* 过渡效果 */
    transition: 1s ease;
}

.text {
    /* 绝对定位 居中 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    letter-spacing: 2px;
}

/* 鼠标悬停时改变线条样式 */
.button:hover .shape {
    stroke: #06e6a0;
    stroke-width: 3;
    stroke-dasharray: 50 0;
    stroke-dashoffset: 0;
}