freeCodeCamp/guide/chinese/css/css-buttons/index.md

title	localeTitle
CSS Buttons	CSS按钮

CSS按钮

• 您可以设置任何可点击按钮的样式（HTML <button>元素）

<button>Click Me</button>

• 默认按钮如下所示：

设计按钮

您可以更改按钮的多个属性以更改其外观。

要为按钮添加阴影，请使用box-shadow属性。

要为禁用效果的按钮添加透明度，请使用属性opacity 。

要删除边距并创建按钮组，请添加float:left/right属性。

要创建按钮组但使用边框，请使用float属性并添加border property 。

要创建一组垂直按钮，请使用display： block property 。

按钮颜色

要更改按钮的背景颜色，请使用background-color属性：

button {background-color: #6ba0f4;}

要为按钮添加彩色边框，请使用border属性：

button { 
  background-color: #FFF; 
  color: #FFF; 
  border: 2px solid #6ba0f4; 
 } 

按钮文字大小

要更改按钮的文字大小，请使用font-size属性：

button {font-size: 20px;}

按钮填充

要更改按钮的填充，请使用padding属性：

button {padding: 15px 30px;}

按钮宽度

要更改按钮的宽度，无论文本内容如何，​​请使用width属性：

button {width: 250px;}

圆形按钮

要创建圆角按钮，请使用border-radius属性：

button {border-radius: 50%;}

悬停按钮

要在将鼠标移到按钮上时更改按钮的样式，请使用：hover选择器：

button:hover { 
  background-color: #0E2C5B; 
  color: #FFF; 
 } 

要确定悬停效果的速度，请使用属性transition-duration 。

去除按钮的边界

去除按钮的边界

button {
  border: none; 
  padding: 10px 15px;
  background: tomato;
}

禁用按钮

要禁用按钮，请使用cursor属性：

button { 
  cursor: not-allowed; 
 } 

更多信息：

• https://www.w3schools.com/css/css3_buttons.asp
• https://www.w3schools.com/howto/howto css animate_buttons.asp