.cl-effect{position:relative;display:inline-block;padding:0 15px;line-height:35px}.cl-effect::after,.cl-effect::before{content:"";position:absolute;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;pointer-events:none;width:20px;height:1px;background:#000;display:inline-block}.cl-effect::before{top:0;left:0;margin-top:6px;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);transform:rotate(90deg);-webkit-transform-origin:0 0;-moz-transform-origin:0 0;transform-origin:0 0}.cl-effect::after{right:0;bottom:0;margin-bottom:8px;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);transform:rotate(90deg);-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;transform-origin:100% 0}a:focus .cl-effect::after,a:focus .cl-effect::before,a:hover .cl-effect::after,a:hover .cl-effect::before{opacity:1}a:focus .cl-effect::before,a:hover .cl-effect::before{left:50%;margin-top:0;-webkit-transform:rotate(0) translateX(-50%);-moz-transform:rotate(0) translateX(-50%);transform:rotate(0) translateX(-50%)}a:focus .cl-effect::after,a:hover .cl-effect::after{right:50%;margin-bottom:2px;-webkit-transform:rotate(0) translateX(50%);-moz-transform:rotate(0) translateX(50%);transform:rotate(0) translateX(50%)}