<p>
  A Simple CSS-Only Arrow 
</p>
<div>
  <a href="#" class="link">CSS Arrow</a>
</div>

// Settings
$arrow-color: #e74c3c;
$arrow-size: 1em;
$arrow-border: 0.2em;


.link {
  position: relative;
  display: block;
  padding: 1em ($arrow-size * 3) 1em 1em;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: $arrow-color;
  box-shadow: inset 0 0 0 $arrow-border $arrow-color;

  &:after, &:before {
    content: "";
    display: block;
    position: absolute;
    transition: all 0.5s ease-in-out;
  }
  &:before {
    top: 50%;
    right: $arrow-size;
    width: $arrow-size;
    height: $arrow-size;
    transform-origin: 50% 50%;
    transform:  translate(0, -($arrow-size / 2)) rotate(45deg);
    box-shadow: inset -#{$arrow-border} $arrow-border 0 0 $arrow-color;
    border-radius: 0 $arrow-size*0.15 0 0;
  }
  
  &:after {
    top: 50%;
    right: 1em;
    width: $arrow-size * 1.3;
    height: $arrow-border;
    transform:  translate(0, -($arrow-border / 2));
    background-color: $arrow-color;
  }
  &:hover {
    &:before {
      transform:  translate(0.5em, -($arrow-size / 2)) rotate(45deg);
    }
    &:after {
      transform:  translate(0.5em, -($arrow-border / 2));
    }
  }
}


body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  background-color: #ecf0f1;
}

p {
  text-align: center;
  font-size: 20px;
  margin-bottom: 2em;
  color: #7f8c8d;
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Raleway:700

External JavaScript

This Pen doesn't use any external JavaScript resources.