SVGで「＞」を作成したサンプル

<button class="button-01">ボタンサンプル</button>
<hr>
<button class="button-02">ボタンサンプル</button>
<hr>
<button class="button-03">ボタンサンプル</button>

.button-01,
.button-02,
.button-03 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  padding: 1em;
  border: 1px solid #fff;
  border-radius: 5px;
  box-sizing: border-box;
  background: #0d6efd;
  color: #fff;
  font-size: 1em;
  cursor: pointer;
}

.button-01::after {
  transform: rotate(45deg);
  width: 5px;
  height: 5px;
  margin-left: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  box-sizing: content-box;
  content: '';
}

.button-02::after {
  width: 10px;
  height: 10px;
  margin-left: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewbox='0 0 10 10'><polyline points='0,1 4.5,5 0,9' stroke='%23fff' stroke-width='2' fill='none' /></svg>") no-repeat;
  content: "";
}

.button-03::after {
  width: 10px;
  height: 10px;
  margin-left: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewbox='0 0 10 10'><polyline points='9,1 0,1 5,4 1,7 9,7' stroke='%23fff' stroke-width='2' fill='none' /></svg>") no-repeat;
  content: "";
}

@media (hover: hover) {
  .entry-content button:hover {
    filter: brightness(1.1);
  }
}

元記事を表示する