有趣的css - wins98复古按钮

设计师工作日常

于 2024-03-18 11:46:49 发布

阅读量440

点赞数 10

文章标签： css 前端 ux 按钮 wins98 复古按钮

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

版权

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是使用 box-shadow 属性模拟绘制 windows98 系统风格按钮。

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

整体效果

使用 box-shadow 属性模拟 windows98 系统风格按钮及点击效果。

一个 windows98 系统复古按钮风格的按钮。

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

核心代码

html 代码

<button class="btn36">确 认</button>

主体 button 标签

css 部分代码

.btn36{
  width: 86px;
  height: 30px;
  background-color: #d1cfc0;
  font-size: 12px;
  color: #000000;
  outline: 1px dotted #333333;
  outline-offset: -4px;  /* 轮廓线偏移 */
  border: none;
  box-shadow: inset 1px 1px 1px #fff, inset -1px -1px 1px #333333;  /* 按钮默认内阴影样式 */
  transition: 0.1s linear;
}
.btn36:active{
  box-shadow: inset 1px 1px 1px #333333, inset -1px -1px 1px #fff;  /* 按钮点击时内阴影样式 */
  transform: scale(0.98);
}

:active 获取鼠标点击状态，默认和点击时切换 box-shadow 阴影属性样式。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>wins98 复古按钮</title>
  </head>
  <body>
    <div class="app">
      <button class="btn36">确 认</button>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #d1cfc0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn36{
  width: 86px;
  height: 30px;
  background-color: #d1cfc0;
  font-size: 12px;
  color: #000000;
  outline: 1px dotted #333333;
  outline-offset: -4px;
  border: none;
  box-shadow: inset 1px 1px 1px #fff, inset -1px -1px 1px #333333;
  transition: 0.1s linear;
}
.btn36:active{
  box-shadow: inset 1px 1px 1px #333333, inset -1px -1px 1px #fff;
  transform: scale(0.98);
}