.type--A{--line_color:#1b1919;--back_color:#ffecf6}.type--B{--line_color:#1b1919;--back_color:#e9ecff}.type--C{--line_color:#1b1919;--back_color:#defffa}.button{position:relative;z-index:0;width:300px;height:80px;text-decoration:none;font-size:14px;font-weight:700;color:var(--line_color);letter-spacing:2px;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.button__text{font-size:24px}.button__text,.button__text span{display:inline;transition:all .3s ease}.button__text span{margin-right:4px}.button:hover .button__text{display:inline}.button:hover .button__text span:last-child{display:block;margin-top:4px;width:100%;text-align:center}.button:after,.button:before,.button__text:after,.button__text:before{content:"";position:absolute;height:3px;border-radius:2px;background:var(--line_color);transition:all .5s ease}.button:before{top:0;left:70px;width:calc(100% - 140px - 32px)}.button:after{top:0;right:70px;width:8px}.button__text:before{bottom:0;right:70px;width:calc(100% - 140px - 32px)}.button__text:after{bottom:0;left:70px;width:8px}.button__line{width:70px;overflow:hidden}.button__line,.button__line:before{position:absolute;top:0;height:100%}.button__line:before{content:"";width:150%;box-sizing:border-box;border-radius:300px;border:3px solid var(--line_color)}.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 .button__text:before,.button:hover:before{width:8px}.button:hover .button__text:after,.button:hover:after{width:calc(100% - 140px - 32px)}.button__drow1,.button__drow2{position:absolute;z-index:-1;border-radius:16px;transform-origin:16px 16px}.button__drow1{top:-16px;left:50px;width:40px;height:0;transform:rotate(30deg)}.button__drow2{top:56px;left:97px;width:40px;height:0;transform:rotate(-127deg)}.button__drow1:after,.button__drow1:before,.button__drow2:after,.button__drow2:before{content:"";position:absolute}.button__drow1:before{bottom:0;left:0;width:0;height:40px;border-radius:16px;transform-origin:16px 16px;transform:rotate(-60deg)}.button__drow1:after{top:-10px;left:45px;width:0;height:40px;border-radius:16px;transform-origin:16px 16px;transform:rotate(69deg)}.button__drow2:before{bottom:0;left:0;width:0;height:40px;border-radius:16px;transform-origin:16px 16px;transform:rotate(-146deg)}.button__drow2:after{bottom:26px;left:-40px;width:0;height:40px;border-radius:16px;transform-origin:16px 16px;transform:rotate(-262deg)}.button__drow1,.button__drow1:after,.button__drow1:before,.button__drow2,.button__drow2:after,.button__drow2:before{background:var(--back_color)}.button:hover .button__drow1{animation:drow1 .06s ease-in;animation-fill-mode:forwards}.button:hover .button__drow1:before{animation:drow2 .08s linear .06s;animation-fill-mode:forwards}.button:hover .button__drow1:after{animation:drow3 .03s linear .14s;animation-fill-mode:forwards}.button:hover .button__drow2{animation:drow4 .06s linear .2s;animation-fill-mode:forwards}.button:hover .button__drow2:before{animation:drow3 .03s linear .26s;animation-fill-mode:forwards}.button:hover .button__drow2:after{animation:drow5 .06s linear .32s;animation-fill-mode:forwards}@keyframes drow1{0%{height:0}to{height:100px}}@keyframes drow2{0%{width:0;opacity: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{width:100%;height:300px;display:flex;flex-direction:column;justify-content:center;align-items:center}.button:not(:last-child){margin-bottom:64px}@media (max-width:768px){.button{width:100%;height:60px;font-size:12px}.button__text{font-size:20px}.container{height:auto}.button:not(:last-child){margin-bottom:32px}}