如何制作按钮 CSS 悬停效果。纯 CSS 波浪形设计。HTML 按钮。视频教程、代码文章，或许对您有用

2025-06-07

如何制作按钮 CSS 悬停效果。纯 CSS 波浪设计。HTML 按钮。

视频教程

代码

您可能觉得有用的文章

大家好，欢迎！今天我们将学习如何使用纯 CSS 轻松创建超棒的波浪形按钮悬停效果。我们将学习如何创建纯 CSS 波浪曲线设计。

如果您想观看演示或完整的编码教程视频，可以观看下面的教程。

视频教程

因此，不要浪费更多时间，让我们看看如何编写代码。

代码

首先，这个项目有两个文件index.html和style.css。先写基本的 HTML 结构。然后，创建一个按钮。

索引.html

<button class="btn">
    button
</button
Enter fullscreen mode Exit fullscreen mode
输出

博客 -1
现在，将此按钮置于中心，并为主体提供深色背景。

样式.css
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0e0e0e;
}
Enter fullscreen mode Exit fullscreen mode
输出

博客-2

经过这个样式的按钮一点点。

样式.css
.btn{
    position: relative;
    width: 200px;
    height: 60px;
    font-size: 30px;
    text-transform: capitalize;
    font-family: 'roboto', sans-serif;
    letter-spacing: 2px;
    background-color: transparent;
    color: #fff;
    border: none;
    outline: none;
    overflow: hidden;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

确保你给予overflow: hidden;。

输出

博客-3

现在在index.html我们的button元素内部，创建span带有 class 的元素wave。像这样。

索引.html
<button class="btn">
    <span class="wave"><p>aaaaaaaaaaaaaaaaaaaaaa</p></span>
    button
</button>
Enter fullscreen mode Exit fullscreen mode

您可以在p标签内输入任何内容，但请确保输入长文本。

给它一些风格。

样式.css
.wave{
    position: absolute;
    background: rgb(255, 46, 46);
    width: 100%;
    height: 80%;
    left: 0;
    bottom: 0%;
}
Enter fullscreen mode Exit fullscreen mode
输出

博客-4

嗯，这看起来不像我们要的效果。为了达到那种效果，p也需要对元素进行样式设置。

样式.css
.wave{
    // previous styles.
    transform: rotate(180deg);
}
.wave p{
    font-size: 60px;
    color: transparent;
    text-decoration-style: wavy;
    text-decoration-color: rgb(255, 46, 46);
    text-decoration-line: underline;
}
Enter fullscreen mode Exit fullscreen mode
输出

博客-5

现在，你可以看到顶部有一些东西了。稍微改变一下span元素的属性。line-height

.wave{
     // previous styles.
     line-height: 40px;
}
Enter fullscreen mode Exit fullscreen mode
输出

博客-6

我们现在有了波浪。如果您没有注意到，我们用这些属性创建了这条波浪线。

    text-decoration-style: wavy;
    text-decoration-color: rgb(255, 46, 46);
    text-decoration-line: underline;
Enter fullscreen mode Exit fullscreen mode

正如您在输出中看到的，波浪之间几乎没有间隙。因此，为了解决这个问题，请创建另一个span具有相同类的元素。

索引.html
<button class="btn">
    <span class="wave"><p>aaaaaaaaaaaaaaaaaaaaaa</p></span>
    <span class="wave"><p>aaaaaaaaaaaaaaaaaaaaaa</p></span>
    button
</button>
Enter fullscreen mode Exit fullscreen mode

并改变第二波的行高。

样式.css
.wave:nth-child(2){
    line-height: 30px;
}
Enter fullscreen mode Exit fullscreen mode
输出

博客-7

将这些span元素放在按钮后面。使用z-index。并给予transition。

样式.css
.wave{
     // previous styles.
     transition: bottom 1s;
     z-index: -1;
}
Enter fullscreen mode Exit fullscreen mode
输出

博客-8

现在制作波浪动画。

样式.css
.wave p{
    // previous styles
    animation: wave 1s linear infinite;
}

@keyframes wave{
    100%{
        margin-left: -50%;
    }
}
Enter fullscreen mode Exit fullscreen mode
输出

无标题设计 (2)

现在我们几乎完成了，只需将wave元素的底部值更改为-100%并将其设置为0悬停。

样式.css
.wave{
    bottom: -100%; // set it negative 100%
}
.btn:hover .wave{
    bottom: 0;
}
Enter fullscreen mode Exit fullscreen mode
输出

无标题设计 (1)

我们完成了。

好了，就是这样。希望你理解了所有内容。如果你有疑问或者我遗漏了什么，请在评论区告诉我。

您可能觉得有用的文章

  1. CSS 位置
  2. CSS媒体查询
  3. CSS 弹性框
  4. 无限 CSS 加载器
  5. Youtube 克隆：Youtube API

如果你喜欢，可以订阅我的YouTube频道。我创作了很棒的网页内容。订阅

感谢您的阅读。

文章来源：https://dev.to/themodernweb/create-awesome-wavy-button-hover-effect-pure-css-wavy-design-1722
Devto 翻译
PREV
史上最佳 CSS 效果。你从未见过如此惊艳的效果。我是谁？1. 卡片悬停效果。2. 登录/注册表单 3. Thanos Snap 图片滑块 4. 图片库 5. 加载动画 6. 磁贴导航 7. 产品卡片 8. 3D 内容滑块 9. 页眉动画 - 01 10. 页眉动画 - 02 11. 3D 导航栏
NEXT
🔥🔥😮 完全响应式的现代产品页面。仅提供 CSS 演示视频教程 - 让我们开始编码吧