css 最经典的按钮样式

在这里插入图片描述

  1. html
<div class="container">
  <div class="box"><span>Multi Box-Shadow</span></div>
</div>
  1. css
body {
  width: 100%;
  height: 100vh;
  background: #f5f6fa;
  font-family: 'Poppins', sans-serif;
  color: #7f8fa6;
  display: grid;
  justify-content: center;
  align-items: center;
}

.container {
  width: 50%;
  height: 50%;
  display: flex;
  align-items: center;
  text-align: center;
}

.container div {
  min-width: 200px;
  padding: 50px 0;
  border-radius: 10px;
  background: #f5f6fa;
  margin-right: 100px;
}

.box {
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05), 
    0px 6px 6px rgba(0, 0, 0, 0.1),
    0px 8px 8px rgba(0, 0, 0, 0.05), 
    0px 10px 15px rgba(0, 0, 0, 0.03),
    0px 30px 30px rgba(0, 0, 0, 0.15),
    0px 70px 60px rgba(0, 0, 0, 0.15);
}

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页