CSS 按鈕

本章節我們為大家介紹使用 CSS 來制作按鈕。

我們先看一下默認按鈕和用css制作的按鈕html>

php中文網(php.cn)

.button?{

background-color:?#4CAF50;

border:?none;

color:?white;

padding:?15px?32px;

text-align:?center;

text-decoration:?none;

display:?inline-block;

font-size:?16px;

margin:?4px?2px;

cursor:?pointer;

}

CSS?按鈕

默認按鈕

鏈接按鈕

按鈕

運行程序看一下

按鈕顏色

我們可以使用?background-color?屬性來設置按鈕顏色:

實例html>

php中文網(php.cn)

.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?*/

按鈕顏色

我們可以使用?background-color?屬性來設置按鈕顏色:

Green

Blue

Red

Gray

Black

運行程序看一下

按鈕大小

我們可以使用?font-size?屬性來設置按鈕大小:

實例html>

php中文網(php.cn)

.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;

}

.button1?{font-size:?10px;}

.button2?{font-size:?12px;}

.button3?{font-size:?16px;}

.button4?{font-size:?20px;}

.button5?{font-size:?24px;}

按鈕大小

我們可以使用?font-size?屬性來設置按鈕大小:

10px

12px

16px

20px

24px

運行程序看一下

圓角按鈕

我們可以使用?border-radius?屬性來設置圓角按鈕:html>

php中文網(php.cn)

.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;

}

.button1?{border-radius:?2px;}

.button2?{border-radius:?4px;}

.button3?{border-radius:?8px;}

.button4?{border-radius:?12px;}

.button5?{border-radius:?50%;}

圓角按鈕

我們可以使用?border-radius?屬性來設置圓角按鈕:

2px

4px

8px

12px

50%

運行程序看一下

按鈕邊框顏色

我們可以使用?border?屬性設置按鈕邊框顏色:html>

php中文網(php.cn)

.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;

}

.button1?{

background-color:?white;

color:?black;

border:?2px?solid?#4CAF50;

}

.button2?{

background-color:?white;

color:?black;

border:?2px?solid?#008CBA;

}

.button3?{

background-color:?white;

color:?black;

border:?2px?solid?#f44336;

}

.button4?{

background-color:?white;

color:?black;

border:?2px?solid?#e7e7e7;

}

.button5?{

background-color:?white;

color:?black;

border:?2px?solid?#555555;

}

按鈕邊框顏色

我們可以使用?border?屬性設置按鈕邊框顏色:

Green

Blue

Red

Gray

Black

運行程序看一下

鼠標懸停按鈕

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

提示:?我們可以使用?transition-duration?屬性來設置 "hover" 效果的速度:html>

php中文網(php.cn)

.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;

}

鼠標懸停按鈕

Green

Blue

Red

Gray

Black

運行程序看一下

按鈕陰影

陰影按鈕?鼠標懸停后顯示陰影

我們可以使用?box-shadow?屬性來為按鈕添加陰影:html>

php中文網(php.cn)

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

}

按鈕陰影

陰影按鈕

鼠標懸停后出現陰影

運行程序看一下

禁用按鈕

我們可以使用?opacity?屬性為按鈕添加透明度 (看起來類似 "disabled" 屬性效果)。

提示:?我么可以添加?cursor?屬性并設置為 "not-allowed" 來設置一個禁用的圖片:html>

php中文網(php.cn)

.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;

}

.disabled?{

opacity:?0.6;

cursor:?not-allowed;

}

禁用按鈕

正常按鈕

禁用按鈕

運行程序看一下

按鈕寬度

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

提示:?如果要設置固定寬度可以使用像素 (px) 為單位，如果要設置響應式的按鈕可以設置為百分比。html>

php中文網(php.cn)

.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;

}

.button1?{width:?250px;}

.button2?{width:?50%;}

.button3?{

padding-left:?0;

padding-right:?0;

width:?100%;

}

按鈕寬度

250px

50%

100%

運行程序看一下

按鈕組

移除外邊距并添加?float:left?來設置按鈕組:html>

php中文網(php.cn)

.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;

}

按鈕組

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

Button

Button

Button

Button

記住要清除浮動，否則下一個?p?元素的按鈕也會顯示在同一行。

運行程序看一下

帶邊框按鈕組

我們可以使用?border?屬性來設置帶邊框的按鈕組:html>

php中文網(php.cn)

.button?{

background-color:?#4CAF50;?/*?Green?*/

border:?1px?solid?green;

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;

}

帶邊框按鈕組

Add?borders?to?create?a?bordered?button?group:

Button

Button

Button

Button

記住要清除浮動，否則下一個?p?元素的按鈕也會顯示在同一行。

運行程序看一下

按鈕動畫

鼠標移動到按鈕上后添加箭頭標記:html>

php中文網(php.cn)

.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;

}

按鈕動畫

Hover?

運行程序看一下

點擊時添加 "波紋" 效果:html>

php中文網(php.cn)

.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

}

按鈕動畫?-?波紋效果

Click?Me

運行程序看一下

點擊時添加 "壓下" 效果:html>

php中文網(php.cn)

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

}

按鈕動畫?-?"按壓效果"

Click?Me

運行程序看一下

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的php按钮css样式,CSS 按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。