css 方形按钮

CSS 方形按钮是网页设计中常用的一个元素，它为网站带来美观、现代、清爽的外观。

.button {
  display: inline-block;
  background-color: #4CAF50; /*按钮背景颜色*/
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  border: none;
  border-radius: 0px; /*边框半径，设置为0即可得到方形*/
  Box-shadow: 0 2px 4px rgba(0,0.5); /*投影*/
}

/*鼠标悬停效果*/
.button:hover {
  background-color: #3e8e41;
  color: white;
}

/*鼠标按下效果*/
.button:active {
  background-color: #2b7027;
  Box-shadow: 0 1px 2px rgba(0,0.5);
  transform: translateY(1px);
}

上述代码中，我们使用了border-radius属性将按钮的边框半径设置为0，从而实现了方形按钮的效果。

同时，我们还添加了鼠标悬停效果和鼠标按下效果，使按钮看起来更加生动，用户体验更好。

当然，我们可以根据实际需求对按钮的属性进行调整，如修改背景颜色、文字大小、边框颜色、投影等等，以适应不同的页面。