css 最經典的按鈕樣式

ownlight發表於2020-10-30

在這裡插入圖片描述

  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);
}

相關文章