body{font-family:'Montserrat',sans-serif}main{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;width:100px;margin-left:20%}main a{width:100%;max-width:30px;height:60px;padding:18px;font-size:.8rem;font-weight:900;color:#49ad7d;text-align:center;text-transform:uppercase;text-decoration:none;box-shadow:0 0 0 1px inset rgba(236,232,225,.3);position:relative}main a:after,main a:before{content:"";width:1px;position:absolute;height:30px}main a:before{right:0;left:initial}main a p{margin:0;height:50px;line-height:54px;box-sizing:border-box;z-index:1;left:0;width:150px;position:relative;overflow:hidden;border-radius:5px}main a p span.base{box-sizing:border-box;position:absolute;z-index:2;width:100%;height:100%;left:0;border:1px solid #49ad7d}main a p span.base:before{content:"";width:2px;height:2px;left:-1px;top:-1px;background:#0f1923;position:absolute;-webkit-transition:.3s ease-out all;transition:.3s ease-out all}main a p span.bg{left:-5%;position:absolute;background:#49ad7d;width:0;height:100%;z-index:3;-webkit-transition:.3s ease-out all;transition:.3s ease-out all;-webkit-transform:skewX(-10deg);transform:skewX(-10deg)}main a p span.text{z-index:4;width:100%;height:100%;position:absolute;left:0;top:0;font-size:1.8em}main a p span.text:after{content:"";width:4px;height:4px;right:0;bottom:0;background:#49ad7d;position:absolute;-webkit-transition:.3s ease-out all;transition:.3s ease-out all;z-index:5}main a:hover{color:#fff}main a:hover span.bg{width:110%}main a:hover span.text:after{background:#49ad7d}