css 最經典的按鈕樣式
- html
<div class="container">
<div class="box"><span>Multi Box-Shadow</span></div>
</div>
- 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);
}
相關文章
- 9 款經典華麗的 CSS3 分享按鈕CSSS3
- jQuery/CSS3經典按鈕系列外掛(一)jQueryCSSS3
- 「HTML+CSS」--自定義按鈕樣式【004】HTMLCSS
- 「HTML+CSS」--自定義按鈕樣式【003】HTMLCSS
- [HTML/CSS]uploadify自定義按鈕樣式HTMLCSS
- 「HTML+CSS」--自定義按鈕樣式【001】HTMLCSS
- 「HTML+CSS」--自定義按鈕樣式【002】HTMLCSS
- 數字按鈕分頁CSS樣式程式碼CSS
- Qt更改按鈕樣式 (以QSpinBox使用左右按鈕樣式為例)QT
- css自定義單選按鈕的樣式程式碼例項CSS
- 13種常用按鈕、文字框、表單等CSS樣式CSS
- checkbox樣式研究——按鈕
- webuploader橫向按鈕樣式Web
- 檔案上傳按鈕樣式
- 怎樣用純HTML和CSS更改預設的上傳檔案按鈕樣式HTMLCSS
- div按鈕CSSCSS
- 登陸註冊按鈕的樣式設計
- 建立WINDOWS XP樣式的ActiveX按鈕 (轉)Windows
- 成品直播原始碼推薦,原生button按鈕css去掉預設樣式原始碼CSS
- antd-mobile 自定義picker按鈕樣式
- Android 自定義Switch開關按鈕的樣式Android
- 點選一個按鈕使其樣式發生變化,再點選另一個按鈕發生同樣變化,但上一個按鈕樣式復原
- css自定義 range radio select的樣式滑輪,按鈕,選擇框CSS
- CSS按鈕垂直水平居中CSS
- css立體按鈕效果CSS
- CSS 叉號按鈕效果CSS
- 小程式的按鈕按下去的樣式(button-hover)為啥不起作用?
- 如何修改移動裝置按鈕預設樣式
- CSS開關按鈕三例CSS
- CSS3動畫按鈕效果CSSS3動畫
- css中按鈕的四種狀態CSS
- 乾貨分享!懸浮按鈕設計規範和經典實踐
- DcatAdmin行操作按鈕樣式調整(圖示+文字)
- QComboBox 右側下拉按鈕qss樣式設定
- 讓按鈕強制失焦,變回點選之前的樣式
- 11個最新最流行的幽靈按鈕
- QT經驗(一)——按鈕長按事件分析QT事件
- 按鈕式超連結