有趣的css - 简约的动态关注按钮

设计师工作日常

已于 2024-02-03 20:11:10 修改

阅读量542

点赞数 13

分类专栏：有趣的css 文章标签： css 前端 css按钮 css 动画

于 2024-02-01 13:04:07 首次发布

本文链接：https://blog.csdn.net/justliu1989/article/details/135971588

版权

有趣的css 专栏收录该内容

70 篇文章 2 订阅

订阅专栏

简约的动态关注按钮

页面效果
核心代码
- html代码
- css代码
完整代码

页面效果

此效果主要使用 css 伪选择器配合 css content 属性，以及 transition(过渡)属性来实现一个简约的动态按钮效果。

此效果可适用于关注按钮、详情按钮等，增强用户交互体验。

核心代码部分，简要说明了写法思路，看 css 部分的注释说明；完整代码在最后，可直接复制到本地运行。

核心代码

html代码

<button>关注我</button>

按钮主体代码就是一个 button 按钮标签，比较简单。

css代码

button{
  width: 140px;
  height: 46px;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: #333;
  background-color: transparent;  /* 使主体 button 背景透明 */
  border: none;
  position: relative;
  box-sizing: border-box;
  transition: all 0.4s ease-in-out;  /* 增加过渡效果 */
}
button:before{   /* 伪选择器 :before */
  content: '';  /* css content 属性 */
  width: 4px;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -5;  /* 设置层叠顺序低于 button 主体，不遮掩 button 中的文字内容 */
  background-color: #333;
  transition: all 0.4s ease-in-out;  /* 增加过渡效果 */
}
button:hover{
  cursor: pointer;
  color: #fff;
}
button:hover:before{
  width: 100%;
  border-radius: 6px;
}

使用伪选择器 :before 配合 css content 属性，然后设置 transition 参数来实现按钮过渡动画效果。

想了解更多 css 中伪选择器的可以看我之前的这篇文章。

一般人我都不告诉他的那些css伪选择器

想知道css content 属性的更多妙用和技巧的可以看我的这篇文章。

CSS Content 属性的几种妙用和技巧

完整代码

html页面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>简约的动态关注按钮</title>
  </head>
  <body>
    <div class="app">
      <button>关注我</button>
    </div>
  </body>
</html>

css样式

.app{
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
button{
  width: 140px;
  height: 46px;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: #333;
  background-color: transparent;
  border: none;
  position: relative;
  box-sizing: border-box;
  transition: all 0.4s ease-in-out;
}
button:before{
  content: '';
  width: 4px;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -5;
  background-color: #333;
  transition: all 0.4s ease-in-out;
}
button:hover{
  cursor: pointer;
  color: #fff;
}
button:hover:before{
  width: 100%;
  border-radius: 6px;
}