Question

我试图在悬停按钮上同时设计一个丝带形状的按钮，并且应该在两端都显示水平线和图标。

.right-left-flag {
          position: relative;
          background: black;
          padding: 22.1px 40px;
          color: #fff;
          text-transform: uppercase;
        }

        .right-left-flag:before,
        .right-left-flag:after {
          border-color: #000 transparent;
          top: 0;
        }

        .right-left-flag:before,
        .right-left-flag:after {
          border-style: solid;
          height: 0;
          width: 0;
          display: block;
          content: "";
          position: absolute;
        }

        .right-left-flag:before {
          left: -19.5px;
          border-width: 33px 0 28.5px 20px;
        }
        
        .right-left-flag:after {
        right: -19.5px;
        border-width: 33px 20px 28.5px 0;
    }

 <a href="#" class="right-left-flag">Read More</a>

Answer 1

希望这会帮助您了解如何做。

您可以将任何字体图标添加到content中跨度的后和前元素。

.right-left-flag {
  position: relative;
  background: black;
  padding: 22px 40px;
  color: #fff;
  text-transform: uppercase;
  top: 30px;
  left: 30px;
  display: inline-flex;
}

.right-left-flag:before,
.right-left-flag:after {
  border-color: #000 transparent;
  top: 0;
}

.right-left-flag:before,
.right-left-flag:after {
  border-style: solid;
  height: 0;
  width: 0;
  display: block;
  content: "";
  position: absolute;
}

.right-left-flag:before {
  left: -19.5px;
  border-width: 33px 0 28.5px 20px;
}

.right-left-flag:after {
  right: -19.5px;
  border-width: 33px 20px 28.5px 0;
}

.right-left-flag:hover>span {
  opacity: 1
}

.right-left-flag>span {
  opacity: 0;
  position: absolute;
  left: 5px;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: #fff;
  transition: all .2s;
}

.right-left-flag>span:before {
  content: ':)';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.right-left-flag>span:after {
  content: ':)';
  position: absolute;
  left: auto;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

<a href="#" class="right-left-flag">Read More<span></span></a>

丝带形状带有图标和上悬停线的按钮

1 个答案: