JSFiddle - React, Tailwind, and code Playground

by Sergey Goryachev

HTML

<a href="#" class="arrow"></a>

<div class="wrapper">
  <a href="#" class="arrow"></a>
</div>

CSS

.wrapper {
  background: gray;
  padding: 20px 0;
}
a.arrow {
  width: 40px;
  height: 40px;
  background: blue;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  position: relative;
  transition: opacity .5s ease;
}
a.arrow:hover {
  opacity: .5;
}
a.arrow:before,
a.arrow:after {
  content: '';
  position: absolute;
  border-radius: 2px;
  background: white;
  width: 20px;
  height: 7px;
  left: 50%;
  top: 50%;
}
a.arrow:before {
  transform: translate(-50%,-50%) rotate(-45deg);
  margin: -1px 0 0 -5px;
}
a.arrow:after {
  transform: translate(-50%,-50%) rotate(45deg);
  margin: -1px 0 0 5px;
}