有趣的CSS - 新拟态按钮

设计师工作日常

已于 2024-05-19 18:04:39 修改

阅读量1.1k

点赞数 32

分类专栏：有趣的css 文章标签： css 前端 ux 交互新拟态按钮

于 2024-03-11 11:14:17 首次发布

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

版权

有趣的css 专栏收录该内容

70 篇文章 2 订阅

订阅专栏

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是一个好看的新拟态风格的按钮。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

使用 box-shadow 属性模拟新拟态风格按钮，当鼠标 :hover 悬浮时，通过 transition 过渡效果实现阴影变化丝滑过渡。

用css写的一个好看的新拟态风格的按钮。

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

核心代码

html 代码

<button class="btn32">FUN</button>

主体 button 标签。

css 部分代码

.btn32{
  height: 70px;
  padding: 0 20px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 10px;
  background-color: #f2fff7;
  font-size: 32px;
  font-weight: 700;
  color: #44d431;
  box-shadow: 6px 6px 16px rgba(0,0,0,0.2),-6px -6px 16px rgba(255,255,255,0.8),inset 0px 0px 0px rgba(0,0,0,0.2),inset 0px 0px 0px rgba(255,255,255,0.8);
  transition: 0.2s;
}
.btn32:hover{
  color: #3034d4;
  background-color: #f2f3ff;
  border: 1px solid rgba(255,255,255,1);
  box-shadow: 0px 0px 0px rgba(0,0,0,0.2),0px 0px 0px rgba(255,255,255,0.8),inset 6px 6px 12px rgba(0,0,0,0.2),inset -6px -6px 12px rgba(255,255,255,0.8);
  transform: translateY(10px) scale(0.98);
}

1.首先给 button 设置 box-shadow 属性，设置默认样式的外阴影和内阴影

2.然后 button 按钮增加 transition 属性，参数设置为 transition: 0.2s

3.当鼠标 :hover 悬浮在上方时，改变按钮的外阴影和内阴影参数，实现阴影的变化过渡。

完整代码如下

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="btn32">FUN</button>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #d1d1d1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn32{
  height: 70px;
  padding: 0 20px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 10px;
  background-color: #f2fff7;
  font-size: 32px;
  font-weight: 700;
  color: #44d431;
  box-shadow: 6px 6px 16px rgba(0,0,0,0.2),-6px -6px 16px rgba(255,255,255,0.8),inset 0px 0px 0px rgba(0,0,0,0.2),inset 0px 0px 0px rgba(255,255,255,0.8);
  transition: 0.2s;
}
.btn32:hover{
  color: #3034d4;
  background-color: #f2f3ff;
  border: 1px solid rgba(255,255,255,1);
  box-shadow: 0px 0px 0px rgba(0,0,0,0.2),0px 0px 0px rgba(255,255,255,0.8),inset 6px 6px 12px rgba(0,0,0,0.2),inset -6px -6px 12px rgba(255,255,255,0.8);
  transform: translateY(10px) scale(0.98);
}