CSS按钮Buttons

您可以设置任何可点击按钮的样式（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的按钮

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

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

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

禁用按钮

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

button {
  cursor: not-allowed;
 }

更多CSS教程

学习更多CSS教程