<footer class="footer">
  <button class="button">重置</button>
  <button class="button active">确定</button>
</footer>
/* version 1 */
.footer {
  display: flex;
  background: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08))
      no-repeat top / calc(100% - 48px) 1px,
    linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)) no-repeat center /
      100% 16px,
    #f6f6f6;
  padding-top: 1px;
  gap: 1px;
}
.button {
  flex: 1;
  height: 48px;
  border: 0;
  background-color: inherit;
}
.button.active {
  color: #8bb800;
}

/* version 2 */
/* .footer {
  display: flex;
  background: #f6f6f6;
  box-shadow: 0 -24px 0 -23px rgba(0, 0, 0, 0.08);
}
.button {
  flex: 1;
  height: 48px;
  border: 0;
  background: none;
}
.button:not(:first-child) {
  margin-left: 1px;
  box-shadow: -17px 0 0 -16px rgba(0, 0, 0, 0.08);
}
.button.active {
  color: #8bb800;
} */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.