HTML和css中的CSS按钮样式设置方法

在这篇博客中，通过实例了解应用于HTML按钮的不同样式。

如何在CSS和HTML中设置按钮的样式示例

让我们在HTML中创建一个按钮，使用按钮标签

  <button type="button" id="button"> Button</button>

或输入标签

    <input type="button" value="button"/>

使用CSS的id选择器来应用样式是很容易的。这个例子改变了按钮的样式background-color,font-weight,font-size,color 。

下面是一个html按钮css字体样式的例子的代码

#button{
  background-color: blue;
  font-weight: 700;
  font-size: 20px;
  color:white;
}

如何在悬停时改变按钮的颜色

这个例子解释了以默认颜色显示按钮的问题。

在悬停按钮时，改变按钮的背景颜色。

CSS提供了:hover 伪类，适用于悬停效果的HTML元素。

在悬停按钮时:

• 将按钮的background-color 改为绿色
• 将按钮上的cursor 改为指针（手）。

下面是一个按钮悬停样式的CSS代码

#button1{
 background-color: red;
  font-weight: 700;
  font-size: 20px;
  color:white;
}
#button1:hover{
  background-color: green;
    cursor: pointer;
}

上述的CSS代码也可以用父选择器(&)写成SASS代码。

#button1{
 background-color: red;
  font-weight: 700;
  font-size: 20px;
  color:white;
  &:hover{
  background-color: green;
    cursor: pointer;
}
}

下面是一个例子

  <button type="button" id="button1"> Click me</button>

关闭按钮的CSS样式

有时，我们想用CSS样式来禁用按钮。

按钮的样式包含cursor: not-allowed 和pointer-events: none; ，可以使光标失效，不在按钮上显示手形指针。

#button2{
  cursor: not-allowed;
  pointer-events: none;
  color: #D0D0D0;
  background-color: #ffffff;
}

Html按钮的编码为id=button2

   <button type="button" id="button2"> Disabled</button>

如何去除按钮的边框颜色

在浏览器中默认显示按钮边框颜色。在Chrome中，存在一个蓝色的边框。

如何去除按钮的边界线？

概述CSS属性可以去除按钮的边界线。

你可以将outline 和box-shadow 样式应用于none

 outline:none;
  box-shadow: none;

下面是一个例子

button{
  background-color: yellow;
  font-weight: 700;
  font-size: 20px;

}
button:hover{
  background-color: green;
  cursor: po;
}
button:focus{
  outline:none;
  box-shadow: none;
}