@import url(http://fonts.lug.ustc.edu.cn/css?family=Lato);
$btn-base:4rem;//range from 4 to 8 looks fine
*, *:before, *:after {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  padding-top:20%;
  text-align:center;
  background-color:#333;
  font-family:'Lato', sans-serif;
  font-weight:400;
}
.ribbon-btn {
  position:relative;
  display:inline-block;
  padding-right:$btn-base/1.2;
  padding-left:$btn-base/1.2;
  color:white;
  font-size:$btn-base/2;
  line-height:$btn-base;
  text-decoration:none;
  letter-spacing:2px;
  border-top:.125rem solid;
  border-bottom:.125rem solid;
  transition:letter-spacing .1s;
  &:hover {letter-spacing:1px;}
  &:active {
    letter-spacing:3px;
    transition:letter-spacing 0s;
    text-transform:uppercase;//just kidding
  }
  
  &:before, &:after {
    content:'';
    position:absolute;
    top:-0.125rem;
    width:$btn-base*.7071+0.18;
    height:$btn-base*.7071+0.18;
    transform:rotate(45deg);
  }
  &:before {
    left:0;
    border-top:.125rem solid;
    border-right:.125rem solid;
    transform-origin:0 0;
  }
  &:after {
    right:$btn-base*-0.7071-0.18;
    border-bottom:.125rem solid;
    border-left:.125rem solid;
    transform-origin:0 0;
  }
}