.litbutton{
  color: #755d86;
  text-transform: uppercase;
}
.litbutton-card{
  color: #000000;
}

.litbutton-card:before,
.litbutton:before {
  content: "[";
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  transform: translateX(20px);
  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  transition: transform 0.3s, opacity 0.2s;
}
.litbutton:before{
  margin-right: 10px;
}
.litbutton-card:after,
.litbutton:after {
  content: "]";
  display: inline-block;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  transition: transform 0.3s, opacity 0.2s;
  -webkit-transform: translateX(-20px);
  -moz-transform: translateX(-20px);
  transform: translateX(-20px);
}
.litbutton:after{
  margin-left: 10px;

}
.litbutton-card:hover,
.litbutton:hover{
  color: #3a97a3;
}
.litbutton-card:active,
.litbutton-active{
  color: #3a97a3;
}
.litbutton-card:hover:before,
.litbutton-card:hover:after,
.litbutton:hover:before,
.litbutton:hover:after {
  color: #3a97a3;
  opacity: 1;
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px);
}
