%body
  %a.button Nacho
  %a.button Taco
View Compiled
$gradient: linear-gradient(45deg, pink, skyblue);
$gradient2: linear-gradient(60deg, pink, skyblue);

body {
  text-align: center;
  padding-top: 15em;
}

.button {
  margin: 1em;
  color: transparent;
  font-size: 2rem;
  letter-spacing: 4px;
  border: 4px solid transparent;
  border-image: $gradient;
  border-image-slice: 1;
  background: $gradient;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  transition: all 0.8s ease;  
  &:hover {
    background: $gradient2;
    transition: all 0.8s ease;
  }
}
View Compiled

External CSS

  1. https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css

External JavaScript

This Pen doesn't use any external JavaScript resources.