css 多边形按钮点击

CSS 多边形按钮点击是一种常见的应用场景，本文将介绍如何使用 CSS 实现多边形按钮点击效果。

.button {
      background: #f90;
      border: none;
      color: #fff;
      cursor: pointer;
      font-size: 20px;
      padding: 10px 20px;
      transition: background .3s ease;
}
.button:hover {
      background: #e80;
}
.button:active {
      background: #d70;
}
.button-triangle {
      position: relative;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 50px 100px 50px;
      border-color: transparent transparent #f90 transparent;
}
.button-triangle:hover {
      border-color: transparent transparent #e80 transparent;
}
.button-triangle:active {
      border-color: transparent transparent #d70 transparent;
      transform: translateY(5px);
}
    

上述代码实现了一个黄色的三角形按钮。其中，.button 类定义了按钮的基本样式，:hover 和 :active 伪类定义了鼠标悬浮和按钮点击的效果。

而 .button-triangle 类使用了 CSS 的 border 属性来实现三角形形状，其中 border-width 的四个值分别表示上、右、下、左的宽度，border-color 的四个值分别表示上、右、下、左的颜色。由于要实现三角形效果，其中的 上边宽度：0，右边宽度：50px，下边宽度：100px，左边宽度：50px，同时，上边和左边的颜色设置为 transparent，右边设置为黄色。

而 .button-triangle:hover 和 .button-triangle:active 则分别定义了鼠标悬浮和按钮点击的效果，其中 border-color 的值改变，同时使用 CSS 的 transform 属性实现向下移动 5px 的效果。

在 HTML 中，可以对按钮使用 button> 标签，并添加 .button-triangle 类，即可实现这种多边形按钮点击效果。

button class="button-triangle">
    Button/button>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！