[分享]css3按钮怎么做

CSS3按钮可以帮助网站制作出比较好的样式，增加用户体验，下面我们来看看如何做一个漂亮的CSS3按钮。

.button {
  display: inline-block;
  padding: 8px 15px;
  margin: 10px;
  border: none;
  border-radius: 20px;
  font-size: 18px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: #2196f3;
  box-shadow: 0px 5px 0px #0e8dbf;
  transition: transform 0.2s ease-in-out;
}
.button:hover {
  transform: translateY(-2px);
} 

首先，我们需要定义一个class名为 "button" 的样式。设置它的display属性为"inline-block"，让按钮保持在一行内并允许设置宽度和高度。设置padding来控制按钮的大小，margin可以控制按钮间的距离。border属性可以控制按钮边框的大小和形状。使用border-radius属性来设置按钮的圆角。color和background属性控制按钮的前景色和背景色。

为了让我们的按钮看起来更好，我们使用了box-shadow属性来为按钮添加投影效果。我们也利用了CSS3的transform属性来添加交互式的功能。当鼠标悬停在按钮上时，我们可以使按钮稍微上移一些。

利用CSS3按钮，我们可以快速创建自己风格的按钮。这只不过是简单的例子，你也可以根据自己的需要来定制你的按钮。