[分享]css3改变按钮样式

在网站设计中，按钮是一个很重要的组成部分。CSS3的出现为按钮样式的设计带来了多种选择。 CSS3中可使用的属性包括：borderradius、boxshadow、textshadow和gradien...

在网站设计中，按钮是一个很重要的组成部分。CSS3的出现为按钮样式的设计带来了多种选择。

CSS3中可使用的属性包括：border-radius、box-shadow、text-shadow和gradient。

button {
  border-radius: 5px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  text-shadow: 1px 1px 1px black;
  background: linear-gradient(to bottom, #007acc 0%, #0061a3 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 1.2em;
  cursor: pointer;
} 

使用border-radius属性可以为按钮添加圆角，可以根据需要设置不同的值，比如5px。

box-shadow属性用于给按钮添加阴影，可以通过设置参数来调整阴影的大小、模糊度和颜色。

text-shadow属性用于给按钮的文字添加阴影，可以增加可读性。

gradient属性可以实现按钮的渐变效果，通过设置to bottom使渐变从上往下进行，设置#007acc和#0061a3为渐变的起始和结束颜色。

最后的效果如下：

<button>按钮</button> 

在实际使用中，可以根据需要进行调整，设计出符合自己网站风格的按钮样式。