分享一个不错的前端按钮

按钮悬停效果预览

代码

基于掘金社区原：https://code.juejin.cn/pen/7381078480013754406 改善，增加了自适应与中文字符优化。原效果可以点击掘金链接，进入在线编辑查看。

这是我修改后的代码，上方那个预览的效果就是本代码的结果预览：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按钮悬停效果</title>
<style>
  /* 设置页面的基本样式 */
  body {
    height: 100vh; /* 视口高度 */
    width: 100vw; /* 视口宽度 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background-color: #212121; /* 背景颜色 */
  }

  /* 移除默认按钮样式 */
  .button {
    margin: 0; /* 移除外边距 */
    height: auto; /* 高度自适应 */
    background: transparent; /* 背景透明 */
    padding: 0; /* 移除内边距 */
    border: none; /* 移除边框 */
    cursor: pointer; /* 鼠标样式为指针 */
  }

  /* 按钮样式 */
  .button {
    --border-right: 6px; /* 右边框宽度 */
    --text-stroke-color: rgba(255,255,255,0.6); /* 文字描边颜色 */
    --animation-color: #37FF8B; /* 动画颜色 */
    --fs-size: 2em; /* 字体大小 */
    letter-spacing: 3px; /* 字间距 */
    text-decoration: none; /* 移除文本装饰 */
    font-size: var(--fs-size); /* 字体大小 */
    font-family: "Microsoft YaHei", Arial, sans-serif; /* 字体 */
    position: relative; /* 相对定位 */
    text-transform: uppercase; /* 文本转为大写 */
    color: transparent; /* 文本颜色透明 */
    -webkit-text-stroke: 1px var(--text-stroke-color); /* 文字描边 */
  }

  /* 悬停时显示的文本样式 */
  .hover-text {
  position: absolute; /* 绝对定位 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box; /* 盒模型 */
  content: attr(data-text); /* 使用属性值作为内容 */
  color: var(--animation-color); /* 文本颜色 */
  width: 0; /* 初始宽度为0 */
  border-right: var(--border-right) solid var(--animation-color); /* 右边框样式 */
  overflow: hidden; /* 超出内容隐藏 */
  transition: width 0.5s ease; /* 过渡效果 */
  -webkit-text-stroke: 1px var(--animation-color); /* 文字描边 */
  text-align: left; /* 文本左对齐 */
  /* 添加负的 margin-right 来确保文本不会被边框遮挡 */
  margin-right: calc(-1 * var(--border-right));
  }

  /* 悬停状态下的样式 */
  .button:hover .hover-text {
    width: calc(100% + var(--border-right)); /* 宽度变为100%加上右边框的宽度 */
    filter: drop-shadow(0 0 23px var(--animation-color)); /* 阴影效果 */
  }
</style>
</head>
<body>

<!-- 按钮结构 -->
<button class="button" data-text="Awesome">
    <span class="actual-text">&nbsp;Hello World！&nbsp;</span>
    <span aria-hidden="true" class="hover-text" data-text="Awesome">&nbsp;Hello World！&nbsp;</span>
</button>

<script>
// JavaScript代码可以在这里添加
</script>

</body>
</html>

适用场景

  1. 网站和Web应用：
    • 导航栏中的菜单项。
    • 促销或广告横幅中的调用操作按钮（Call-to-Action, CTA）。
    • 产品展示页面中的“立即购买”或“了解更多”按钮。
    • 博客文章中的“阅读更多”按钮。
  2. 移动应用：
    • 主屏幕的启动按钮。
    • 功能选项卡中的切换按钮。
    • 表单提交按钮，如“注册”或“登录”。
  3. 数字营销：
    • 电子邮件营销中的链接按钮。
    • 社交媒体推广活动中的互动按钮。
  4. 演示和PPT：
    • 交互式演示中的导航按钮。
    • PowerPoint或Keynote演示文稿中的动作按钮。
  5. 创意设计：
    • 设计作品集网站中的互动元素。
    • 艺术作品展示或个人主页的导航按钮。
  6. 游戏和互动应用：
    • 游戏菜单中的选项按钮。
    • 互动应用中的用户界面元素。

这个按钮的设计具有现代感，因此它特别适合用在需要现代、时尚和动态效果的场合。由于它具有视觉吸引力，使用时应确保它不会分散用户的注意力，而是增强用户对关键操作的响应。