有趣的css - 引导式详情按钮

最新推荐文章于 2024-06-13 09:45:33 发布

设计师工作日常

最新推荐文章于 2024-06-13 09:45:33 发布

阅读量583

点赞数 16

分类专栏：有趣的css 文章标签： css 动效设计 ux/ui 交互设计详情按钮

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

版权

有趣的css 专栏收录该内容

70 篇文章 2 订阅

订阅专栏

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是一个带有图标动效的引导式按钮，适用于阅读详情的引导点击场景。

最新文章通过公众号「设计师工作日常」发布。

整体效果

知识点：
① :hover 获取鼠标状态来切换样式
② 伪元素 :before 、:after 的使用
③ animation 动画的使用

思路：分别创建图标内容以及文字内容,然后根据鼠标状态来让图标背景变宽,然后让图标滑动起来。

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

核心代码

html 代码

<button class="btn58">
  <span class="icon58"></span>
  <span class="btn-text58">查看详情</span>
</button>

button 标签作为按钮主体，然后在 button 标签内创建两个 span 标签,分别是图标内容 class="icon58" 以及文字内容 class="btn-text58"。

css 部分代码

.btn58{
  width: 120px;
  height: 32px;
  position: relative;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  justify-content: left;
  align-items: center;
}
.icon58{
  width: 32px;
  height: 32px;
  position: relative;
  box-sizing: border-box;
  background-color: #ffd845;
  display: block;
  border-radius: 16px;
  transition: 0.3s;
}
.icon58:before,.icon58:after{
  content: '';
  width: 3px;
  height: 10px;
  background-color: #000000;
  display: block;
  position: absolute;
  top: 8px;
  left: 16px;
  transform: rotate(-45deg);
}
.icon58:after{
  top: 14px;
  left: 16px;
  transform: rotate(45deg);
}
.btn-text58{
  font-size: 16px;
  color: #000000;
  font-weight: bold;
  display: block;
  position: absolute;
  left: 40px;
}
.btn58:hover .icon58{
  width: 120px;
}
.btn58:hover .icon58:before,.btn58:hover .icon58:after{
  animation: move58eff 1.2s linear infinite;
}
@keyframes move58eff{
  0% {
    left: 16px;
  }
  50% {
    left: 26px;
  }
  100% {
    left: 16px;
  }
}

1、先定义图标 .icon58 整体的样式，然后利用伪元素 .icon58:before 、.icon58:after 绘制两个矩形，并 transform: rotate(...) 旋转两个矩形的角度，形成箭头图标。

2、定义文字内容 .btn-text58 样式，设置 position: absolute;，调整合适的位置，让其与图标内容对齐，间距合适就好。

3、根据 button 标签主体的 :hover 状态，让图标内容 .icon58 的背景宽度增加，包裹住旁边的文字内容，且有一定的间距即可；然后给图标内容 .icon58 增加过渡属性 transition: 0.3s; ，这样图标背景变宽时，就会有过渡变化效果。

4、根据图标内容最后变宽的宽度值，给 button 主体定义同样宽度即可，还有让其背景透明 background-color: transparent;。

完整代码如下

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 class="btn58">
        <span class="icon58"></span>
        <span class="btn-text58">查看详情</span>
      </button>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.abtn57{
  width: 140px;
  height: 46px;
  list-style: none;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #457356;
  position: relative;
  cursor: pointer;
  border-radius: 23px;
  overflow: hidden;
}
.btn57,.bg57{
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffffff;
}
.bg57{
  position: absolute;
  text-shadow: 90px 0 #fff, -90px 0 #fff,-180px 0 #fff;
  animation: effx57 1.2s linear infinite;
  display: none;
}
@keyframes effx57{
  to{
    transform: translateX(90px);
  }
}
.abtn57:hover .bg57{
  display: block;
}
.abtn57:hover .btn57{
  display: none;
}