css3學習筆記之按鈕

時間  2019-12-05
標籤 css3 css 學習 筆記 按鈕 欄目 CSS 简体版
原文   原文鏈接

基本按鈕樣式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
< html >
< head >
< style >
.button {
     background-color: #4CAF50;
     border: black;/**/
     color: white;/*字體顏色*/
     padding: 15px 32px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     margin: 4px 2px;
     cursor: pointer;
}
</ style >
</ head >
< body >
 
< h2 >CSS 按鈕</ h2 >
 
< button >默認按鈕</ button >
< a  href = "#"  class = "button" >連接按鈕</ a >
< button  class = "button" >按鈕</ button >
< input  type = "button"  class = "button"  value = "輸入框按鈕" >
 
</ body >
</ html >

按鈕顏色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
< html >
< head >
< style >
.button {
     background-color: #4CAF50; /* Green */
     border: none;
     color: white;
     padding: 15px 32px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     margin: 4px 2px;
     cursor: pointer;
}
 
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button5 {background-color: #555555;} /* Black */
</ style >
</ head >
< body >
 
< h2 >按鈕顏色</ h2 >
< p >咱們可使用 background-color 屬性來設置按鈕顏色:</ p >
 
< button  class = "button" >Green</ button >
< button  class = "button button2" >Blue</ button >
< button  class = "button button3" >Red</ button >
< button  class = "button button4" >Gray</ button >
< button  class = "button button5" >Black</ button >
 
</ body >
</ html >
 

按鈕大小

    

咱們可使用 font-size 屬性來設置按鈕大小:html

CSS 實例

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
 
 


 

圓角按鈕

    

咱們可使用 border-radius 屬性來設置圓角按鈕:web

CSS 實例

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

按鈕邊框顏色

    

咱們可使用 border 屬性設置按鈕邊框顏色:字體

CSS 實例

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}
...

鼠標懸停按鈕

咱們可使用 :hover 選擇器來修改鼠標懸停在按鈕上的樣式。動畫

提示: 咱們可使用 transition-duration 屬性來設置 "hover" 效果的速度:spa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
< html >
< head >
< style >
.button {
     background-color: #4CAF50; /* Green */
     border: none;
     color: white;
     padding: 16px 32px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     margin: 4px 2px;
     -webkit-transition-duration: 0.4s; /* Safari */
     transition-duration: 0.4s;
     cursor: pointer;
}
 
.button1 {
     background-color: white; 
     color: black; 
     border: 2px solid #4CAF50;
}
 
.button1:hover {
     background-color: #4CAF50;
     color: white;
}
 
.button2 {
     background-color: white; 
     color: black; 
     border: 2px solid #008CBA;
}
 
.button2:hover {
     background-color: #008CBA;
     color: white;
}
 
.button3 {
     background-color: white; 
     color: black; 
     border: 2px solid #f44336;
}
 
.button3:hover {
     background-color: #f44336;
     color: white;
}
 
.button4 {
     background-color: white;
     color: black;
     border: 2px solid #e7e7e7;
}
 
.button4:hover {background-color: #e7e7e7;}
 
.button5 {
     background-color: white;
     color: black;
     border: 2px solid #555555;
}
 
.button5:hover {
     background-color: #555555;
     color: white;
}
</ style >
</ head >
< body >
 
< h2 >鼠標懸停按鈕</ h2 >
< p >咱們可使用 :hover 選擇器來修改鼠標懸停在按鈕上的樣式。</ p >
< p >< strong >提示:</ strong > 咱們可使用 < code >transition-duration</ code > 屬性來設置 "hover" 效果的速度:</ p >
 
< button  class = "button button1" >Green</ button >
< button  class = "button button2" >Blue</ button >
< button  class = "button button3" >Red</ button >
< button  class = "button button4" >Gray</ button >
< button  class = "button button5" >Black</ button >
 
</ body >
</ html >

按鈕陰影

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
< html >
< head >
< style >
.button {
     background-color: #4CAF50; /* Green */
     border: none;
     color: white;
     padding: 15px 32px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     margin: 4px 2px;
     cursor: pointer;
     -webkit-transition-duration: 0.4s; /* Safari */
     transition-duration: 0.4s;
}
 
.button1 {
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
 
.button2:hover {
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</ style >
</ head >
< body >
 
< h2 >按鈕陰影</ h2 >
< p >咱們可使用 box-shadow 屬性來爲按鈕添加陰影:</ p >
 
< button  class = "button button1" >陰影按鈕</ button >
< button  class = "button button2" >鼠標懸停後出現陰影</ button >
 
</ body >
</ html >
 

禁用按鈕

 

咱們可使用 opacity 屬性爲按鈕添加透明度 (看起來相似 "disabled" 屬性效果)。code

提示: 我麼能夠添加 cursor 屬性並設置爲 "not-allowed" 來設置一個禁用的圖片:orm

CSS 實例

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

按鈕寬度

 

默認狀況下，按鈕的大小有按鈕上的文本內容決定( 根據文本內容匹配長度 )。 咱們可使用 width 屬性來設置按鈕的寬度:htm

提示: 若是要設置固定寬度可使用像素 (px) 爲單位，若是要設置響應式的按鈕能夠設置爲百分比。圖片

CSS 實例

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
 

按鈕組

移除外邊距並添加 float:left 來設置按鈕組:ci

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
< html >
< head >
< style >
.button {
     background-color: #4CAF50; /* Green */
     border: none;
     color: white;
     padding: 15px 32px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     cursor: pointer;
     float: left;
}
 
.button:hover {
     background-color: #3e8e41;
}
</ style >
</ head >
< body >
 
< h2 >按鈕組</ h2 >
< p >移除外邊距並添加 float:left 來設置按鈕組:</ p >
 
< button  class = "button" >Button</ button >
< button  class = "button" >Button</ button >
< button  class = "button" >Button</ button >
< button  class = "button" >Button</ button >
 
< p  style = "clear:both" >< br >記住要清除浮動，不然下一個 p 元素的按鈕也會顯示在同一行。</ p >
 
</ body >
</ html >

帶邊框按鈕組


咱們可使用 border 屬性來設置帶邊框的按鈕組:

CSS 實例

.button {
    float: left;
    border: 1px solid green
}

按鈕動畫

鼠標移動到按鈕上後添加箭頭標記:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
< html >
< head >
< style >
.button {
   display: inline-block;
   border-radius: 4px;
   background-color: #f4511e;
   border: none;
   color: #FFFFFF;
   text-align: center;
   font-size: 28px;
   padding: 20px;
   width: 200px;
   transition: all 0.5s;
   cursor: pointer;
   margin: 5px;
}
 
.button span {
   cursor: pointer;
   display: inline-block;
   position: relative;
   transition: 0.5s;
}
 
.button span:after {
   content: '»';
   position: absolute;
   opacity: 0;
   top: 0;
   right: -20px;
   transition: 0.5s;
}
 
.button:hover span {
   padding-right: 25px;
}
 
.button:hover span:after {
   opacity: 1;
   right: 0;
}
</ style >
</ head >
< body >
 
< h2 >按鈕動畫</ h2 >
 
< button  class = "button"  style = "vertical-align:middle" >< span >Hover </ span ></ button >
 
</ body >
</ html >
 
點擊時添加 "波紋" 效果:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
< html >
< head >
< style >
.button {
     position: relative;
     background-color: #4CAF50;
     border: none;
     font-size: 28px;
     color: #FFFFFF;
     padding: 20px;
     width: 200px;
     text-align: center;
     -webkit-transition-duration: 0.4s; /* Safari */
     transition-duration: 0.4s;
     text-decoration: none;
     overflow: hidden;
     cursor: pointer;
}
 
.button:after {
     content: "";
     background: #90EE90;
     display: block;
     position: absolute;
     padding-top: 300%;
     padding-left: 350%;
     margin-left: -20px!important;
     margin-top: -120%;
     opacity: 0;
     transition: all 0.8s
}
 
.button:active:after {
     padding: 0;
     margin: 0;
     opacity: 1;
     transition: 0s
}
</ style >
</ head >
< body >
 
< h2 >按鈕動畫 - 波紋效果</ h2 >
 
< button  class = "button" >Click Me</ button >
 
</ body >
</ html >
 
點擊時添加 "壓下" 效果:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
< html >
< head >
< style >
.button {
   display: inline-block;
   padding: 15px 25px;
   font-size: 24px;
   cursor: pointer;
   text-align: center;   
   text-decoration: none;
   outline: none;
   color: #fff;
   background-color: #4CAF50;
   border: none;
   border-radius: 15px;
   box-shadow: 0 9px #999;
}
 
.button:hover {background-color: #3e8e41}
 
.button:active {
   background-color: #3e8e41;
   box-shadow: 0 5px #666;
   transform: translateY(4px);
}
</ style >
</ head >
< body >
 
< h2 >按鈕動畫 - "按壓效果"</ h2 >
 
< button  class = "button" >Click Me</ button >
 
</ body >
</ html >
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程