JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">My link</a>

SCSS

a {
  display: block;
  width: 61px;
  height: 67px;
  margin: 50px;
  background-color: #fff;
  text-align: center;
  font-family: "Roboto", sans-serif;
  text-decoration: none;
  line-height: 67px;
  color: #259cff;
  position: relative;
  transition: background-color 0.3s, color 0.3s;
  &::before,
  &::after{
    opacity: 0;
    height: 100%;
    position: absolute;
    top: 0;
    content: "";
    -webkit-transition: opacity 0.3s,width 0.3s,left 0.3s,right 0.3s;
    transition: opacity 0.3s,width 0.3s,left 0.3s,right 0.3s;
  }
  &::before{
    width: 12px;
    left: -12px;
    background: url('https://svgshare.com/i/J61.svg') no-repeat 0;
    background-size: auto 100%;
  }
  &::after{
    width: 12px;
    right: -12px;
    background: url('https://svgshare.com/i/J4j.svg') no-repeat 100%;
    background-size: auto 100%;
  }
  &:hover {
    background-color: #259cff;
    color: #fff;
    &::before,
    &::after{
      opacity: 1;
      width: 17px;
    }
    &::before{
      left: -17px;
    }
    &::after{
      right: -17px;
    }
  }
}