css中按钮样式为菱形

如果你想要在你的网页中使用独特的按钮样式，为什么不尝试使用菱形按钮呢？它不仅能够为你的网页增添现代感和美感，还能够提高用户交互性和可用性。在本文中，我们将介绍如何通过CSS来创建一个简单的菱形按钮样式。

.btn {
  position: relative;
  display: inline-block;
  border: none;
  background: #009688;
  color: #ffffff;
  padding: 15px 25px;
  font-size: 16px;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  transition: all 0.3s;
}

.btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: #ffffff;
  transform: skewX(-35deg);
  transform-origin: bottom left;
  transition: all 0.3s;
}

.btn:hover:before {
  left: 0;
} 

代码中我们定义了一个.btn的类，其基本样式包括：背景颜色为#009688，字体颜色为白色，内部填充为15像素，字体大小为16像素，字母转换为大写并居中对齐。同时，我们使用伪元素:before来创建菱形的形状，通过transform来将其倾斜，并将其左边缘放置在按钮的中心左侧。当我们使用:hover伪类来鼠标移到按钮上时，伪元素:before将会向右移动，直到完全覆盖原始按钮并呈现出完整的菱形形状。这个效果非常炫酷，而且能够为你的网页增添流动感和互动性。

当然，如果你想要创造更复杂的菱形按钮样式，可以通过更改伪元素:before的属性值来实现。你可以尝试调整skewX的旋转度数，或是调整按钮的宽高比例以创造不同大小的菱形形状。总之，使用CSS可以让你尝试各种各样的菱形按钮样式，以满足你所想要呈现的效果。