.btn-flip {
  opacity: 1;
  color: #fff;
  line-height: 15px;
  position: relative;
  text-align: center;
  letter-spacing: 1px;
  display: flex;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 11px;
  width: 16.5%;
  height: 100%;
  justify-content: center;
  flex-direction: column;
  float: left; }
  .btn-flip:hover:after {
    opacity: 1;
    transform: translateY(0) rotateX(0); }
  .btn-flip:hover:before {
    opacity: 0;
    transform: translateY(50%) rotateX(90deg); }
  .btn-flip:after {
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    color: #5aa4cc;
    display: flex;
    transition: 0.3s;
    position: absolute;
    content: attr(data);
    transform: translateY(-50%) rotateX(90deg);
    height: 100%;
    justify-content: center;
    flex-direction: column; }
  .btn-flip:before {
    top: 0;
    left: 0;
    opacity: 1;
    color: #b3fafb;
    padding: 0;
    display: flex;
    line-height: 15px;
    transition: 0.3s;
    position: relative;
    content: attr(data);
    transform: translateY(0) rotateX(0);
    height: 100%;
    justify-content: center;
    flex-direction: column; }