单个 CSS 元素可以创建拉长的六边形按钮吗？

使用CSS（单元素解决方案）创建拉长的六边形按钮

在按钮设计领域，拉长的六边形形状经常引人注目。虽然通常使用多个元素来实现，但是否可以仅使用一个元素来创建这样的按钮？

答案是肯定的！这是实现这种独特设计的创造性解决方案：

构建基本形状

1. 利用两个具有大小的伪元素（:before 和 :after）大约主按钮元素的一半。
2. 为伪元素设置不同的高度以创建倾斜

实现倾斜效果

1. 使用透视和rotateX 变换:before 元素以创建倾斜效果。稍微向前旋转。
2. 对 :after 元素应用类似的变换，但稍微向后旋转。

定位元素

1. 将 :before 和 :after 元素彼此相邻放置，创建一个连续的形状。
2. 使用绝对定位来调整其对齐方式。

用边框和颜色强调

1. 为两个伪元素添加边框- 定义形状的元素。
2. 应用适当的颜色以进一步增强外观。

交互效果（可选）

1. 使用悬停过渡设置主按钮和伪元素的样式以添加交互行为。
2. 自定义颜色和效果

代码示例

/* General Button Style */

.button {
  position: relative;
  display: block;
  background: transparent;
  width: 300px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: #e04e5e;
  margin: 40px auto;
  font-family: Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

.button:before,
.button:after {
  position: absolute;
  content: '';
  width: 300px;
  left: 0px;
  height: 34px;
  z-index: -1;
}

.button:before {
  transform: perspective(15px) rotateX(3deg);
}

.button:after {
  top: 40px;
  transform: perspective(15px) rotateX(-3deg);
}

/* Button Border Style */

.button.border:before,
.button.border:after {
  border: 4px solid #e04e5e;
}

.button.border:before {
  border-bottom: none; /* to prevent the border-line showing up in the middle of the shape */
}

.button.border:after {
  border-top: none; /* to prevent the border-line showing up in the middle of the shape */
}

  
/* Button hover styles */

.button.border:hover:before,
.button.border:hover:after {
  background: #e04e5e;
}

.button.border:hover {
  color: #fff;
}

  
<a href="#" class="button ribbon-outset border">Click me!</a>
  

通过利用这种巧妙的方法，您只需使用一个元素即可轻松创建迷人的细长六边形按钮。这种技术为任何用户界面增添了优雅和独特的感觉。

以上是单个 CSS 元素可以创建拉长的六边形按钮吗？的详细内容。更多信息请关注PHP中文网其他相关文章！