raVpjL

index.html

<div class="container">
  <a href="#" class="special">Le nostre damigiane</a>
</div>

raVpjL.markdown

raVpjL

A Pen by Giulio on CodePen.

License.

style.less

/* VARIABILI */
@brand-primary: #c8a755;
html, body { height: 100%; }
body { display: table; height: 100%; width: 100%; background: #35322f; }
.container { width: 100%; display: table-cell; vertical-align: middle; text-align: center; }
a { text-decoration: none; color: white; }
.special {
  text-transform: uppercase;
  position: relative;
  padding: 15px;
  -webkit-transition: background 0.3s ease-in 0.2s;
  &:after,
  &:before {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: @brand-primary;
    -webkit-transition: all 0.3s ease-out;
  }
  &:before {
    opacity: 0;
    bottom: 50%;
  }
  &:hover {
    background: rgba(0,0,0,0.2);
    -webkit-transition: background 0.3s ease-in 0.2s;
    &:before {
      bottom: 100%;
      opacity: 1;
    }
  }
}