html5--6-47 階段練習2-漸變按鈕
執行個體
1 @charset="UTF-8";
2 .but1{
3 padding: 10px 20px;
4 font-size:16px;
5 text-shadow: 2px 2px 3px rgba(0,0,0,0.8);
6 }
7
8 .but2{
9 border-radius: 10px;
10 }
11
12 .but3{
13 border-radius: 20px;
14 }
15
16 .but1{
17 background: orange;
18 background: linear-gradient(to left,orange, red);
19 }
20
21 .but1:hover{
22 background: red;
23 background: linear-gradient(to right,orange, red);
24 } View Code
1 <!DOCTYPE html>
2 <html lang="zh-cn">
3 <head>
4 <meta charset="UTF-8">
5 <title>6-47課堂示範</title>
6 <link rel="stylesheet" type="text/css" href="style.css">
7 </head>
8 <body>
9 <div>
10 <input type="button" value="漸變按鈕" class="but1">
11 <input type="button" value="漸變按鈕" class="but1 but2">
12 <input type="button" value="漸變按鈕" class="but1 but2 but3">
13 </div>
14 </body>
15 </html> 學習要點
- 運用所學過的知識完成一個簡單的小練習，加深對漸變的了解。
本案例僅是提供一個漸變在按鈕中應用的思路，具體的按鈕樣式需要根據頁面風格調整，并根據需要進一步美化添加其他樣式
我的旨在學過的東西不再忘記（主要使用艾賓浩斯遺忘曲線算法及其它智能學習複習算法）的偏公益性質的完全免費的程式設計視訊學習網站：
fanrenyi.com；有各種前端、後端、算法、大資料、人工智能等課程。
版權申明：歡迎轉載，但請注明出處
一些博文中有一些參考内容因時間久遠找不到來源了沒有注明，如果侵權請聯系我删除。