.type--A{--line_color:#555;--back_color:#ffecf6}.type--B{--line_color:#1b1919;--back_color:#e9ecff}.type--C{--line_color:var(--color-secondary);--back_color:#fff}.button{z-index:0;width:240px;height:56px;color:var(--line_color);letter-spacing:2px;font-size:14px;font-weight:700;text-decoration:none;transition:all .3s;position:relative}.button__text{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.button:before,.button:after,.button__text:before,.button__text:after{content:"";background:var(--line_color);border-radius:2px;height:3px;transition:all .5s;position:absolute}.button:before{width:calc(100% - 128px);top:0;left:54px}.button:after{width:8px;top:0;right:54px}.button__text:before{width:calc(100% - 128px);bottom:0;right:54px}.button__text:after{width:8px;bottom:0;left:54px}.button__line{width:56px;height:100%;position:absolute;top:0;overflow:hidden}.button__line:before{content:"";box-sizing:border-box;border:solid 3px var(--line_color);border-radius:300px;width:150%;height:100%;position:absolute;top:0}.button__line:first-child,.button__line:first-child:before{left:0}.button__line:nth-child(2),.button__line:nth-child(2):before{right:0}.button:hover{letter-spacing:6px}.button:hover:before,.button:hover .button__text:before{width:8px}.button:hover:after,.button:hover .button__text:after{width:calc(100% - 128px)}.button__drow1,.button__drow2{z-index:-1;transform-origin:16px 16px;border-radius:16px;position:absolute}.button__drow1{width:32px;height:0;top:-16px;left:40px;transform:rotate(30deg)}.button__drow2{width:32px;height:0;top:44px;left:77px;transform:rotate(-127deg)}.button__drow1:before,.button__drow1:after,.button__drow2:before,.button__drow2:after{content:"";position:absolute}.button__drow1:before{transform-origin:16px 16px;border-radius:16px;width:0;height:32px;bottom:0;left:0;transform:rotate(-60deg)}.button__drow1:after{transform-origin:16px 16px;border-radius:16px;width:0;height:32px;top:-10px;left:45px;transform:rotate(69deg)}.button__drow2:before{transform-origin:16px 16px;border-radius:16px;width:0;height:32px;bottom:0;left:0;transform:rotate(-146deg)}.button__drow2:after{transform-origin:16px 16px;border-radius:16px;width:0;height:32px;bottom:26px;left:-40px;transform:rotate(-262deg)}.button__drow1,.button__drow1:before,.button__drow1:after,.button__drow2,.button__drow2:before,.button__drow2:after{background:var(--back_color)}.button:hover .button__drow1{animation:60ms ease-in forwards drow1}.button:hover .button__drow1:before{animation:80ms linear 60ms forwards drow2}.button:hover .button__drow1:after{animation:30ms linear .14s forwards drow3}.button:hover .button__drow2{animation:60ms linear .2s forwards drow4}.button:hover .button__drow2:before{animation:30ms linear .26s forwards drow3}.button:hover .button__drow2:after{animation:60ms linear .32s forwards drow5}@keyframes drow1{0%{height:0}to{height:100px}}@keyframes drow2{0%{opacity:0;width:0}10%{opacity:0}11%{opacity:1}to{width:120px}}@keyframes drow3{0%{width:0}to{width:80px}}@keyframes drow4{0%{height:0}to{height:120px}}@keyframes drow5{0%{width:0}to{width:124px}}.container{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100px;display:flex}.button:not(:last-child){margin-bottom:64px}