How do I make an arrow shaped button with css?-CodePudding

I want to make a button that looks something like the image below, left and right, but all I achieved was a simple triangle pointing the directions. Can someone help me?

image of arrow mentioned on the text

CodePudding user response：

Use font awesome icon inside a button https://fontawesome.com/v6/icons/angles-right?s=solid

button {
  outline: none;
  border: none;
  background: transparent;
  cursor: pointer;
}

<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>

<body>
  <button><i ></i></button>
</body>

</html>

CodePudding user response：

I will use unicode character like » and «

more chars

https://unicode-table.com/en/sets/arrow-symbols/

http://xahlee.info/comp/unicode_arrows.html

button,
li {
  font-size: 40px;
  font-weight: bold;
}

li {
  list-style: none;
}

ul li:before {
  content: '» ➫ ➾';
  margin: 5px;
}

<button>button ➵</button>

<ul>
  <li>one</li>
  <li>two</li>
</ul>