.type--A{
    --line_color : #ffffff ;
    --back_color : #faaf04  ;
  }

  .button{
      position : relative ;
      /* z-index : 0 ; */
      width : 130px ;
      height : 35px ;
      text-decoration : none ;
      /* font-size : 14px ;  */
      /* font-weight : bold ; */
      color : var(--line_color) ;
      /* letter-spacing : 2px ; */
      transition : all .3s ease ;
  }
  .button__text{
      display : flex ;
      justify-content : center ;
      align-items : center ;
      width : 100% ;
      height : 100% ;
      font-size: 12px;
  }
  .button::before,
  .button::after,
  .button__text::before,
  .button__text::after{
      content : '' ;
      position : absolute ;
      height : 2px ; /*----grosime bordura elemente mici*/
      border-radius : 2px ;
      background : var(--line_color) ;
      transition : all .5s ease ;
  }
  .button::before{
      top : 0 ;
      left : 54px ;
      width : calc( 100% - 56px * 2 - 16px ) ;
  }
  .button::after{
      top : 0 ;
      right : 54px ;
      width : 8px ;
  }
  .button__text::before{
      bottom : 0 ;
      right : 54px ;
      width : calc( 100% - 56px * 2 - 16px ) ;
  }
  .button__text::after{
      bottom : 0 ;
      left : 54px ;
      width : 8px ;
  }
  .button__line{
      position : absolute ;
      top : 0 ;
      width : 56px ;
      height : 100% ;
      overflow : hidden ;
  }
  .button__line::before{
      content : '' ;
      position : absolute ;
      top : 0 ;
      width : 150% ;
      height : 100% ;
      box-sizing : border-box ;
      border-radius : 300px ;
      border : solid 1.5px var(--line_color) ; /*----grosime bordura elemente mari*/
  }
  .button__line:nth-child(1),
  .button__line:nth-child(1)::before{
      left : 0 ;
  }
  .button__line:nth-child(2),
  .button__line:nth-child(2)::before{
      right : 0 ;
  }
  .button:hover{
      letter-spacing : 1px ;
      font-weight : 500;
  }
  .button:hover::before,
  .button:hover .button__text::before{
      width : 8px ;
  }
  .button:hover::after,
  .button:hover .button__text::after{
      width : calc( 100% - 56px * 2 - 16px ) ;
  }
  .button__drow1,
  .button__drow2{
      position : absolute ;
      z-index : -1 ;
      border-radius : 16px ;
      transform-origin : 16px 16px ;
  }
  .button__drow1{
    top : -15px ;
    left : 22px ;
    width : 32px ; 
    transform : rotate( 30deg ) scale(0.5); 
}
.button__drow2{
    top : 20px ;
    left : 37px ; 
    width : 32px ;
    transform : rotate(-127deg ) scale(0.5); 
}
  .button__drow1::before,
  .button__drow1::after,
  .button__drow2::before,
  .button__drow2::after{
      content : '' ;
      position : absolute ;
  }
  .button__drow1::before{
      bottom : 0 ;
      left : 0 ;
      width : 0 ;
      height : 32px ;
      border-radius : 16px ;
      transform-origin : 16px 16px ;
      transform : rotate( -60deg ) ;
  }
  .button__drow1::after{
      top : -10px ;
      left : 45px ;
      width : 0 ;
      height : 32px ;
      border-radius : 16px ;
      transform-origin : 16px 16px ;
      transform : rotate( 69deg ) ;
  }
  .button__drow2::before{
      bottom : 0 ;
      left : 0 ;
      width : 0 ;
      height : 32px ;
      border-radius : 16px ;
      transform-origin : 16px 16px ;
      transform : rotate( -146deg ) ;
  }
  .button__drow2::after{
      bottom : 26px ;
      left : -40px ;
      width : 0 ;
      height : 32px ;
      border-radius : 16px ;
      transform-origin : 16px 16px ;
      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 : drow1 ease-in .06s ;
      animation-fill-mode : forwards ;
  }
  .button:hover .button__drow1::before{
      animation : drow2 linear .08s .06s ;
      animation-fill-mode : forwards ;
  }
  .button:hover .button__drow1::after{
      animation : drow3 linear .03s .14s ;
      animation-fill-mode : forwards ;
  }
  .button:hover .button__drow2{
      animation : drow4 linear .06s .2s ;
      animation-fill-mode : forwards ;
  }
  .button:hover .button__drow2::before{
      animation : drow3 linear .03s .26s ;
      animation-fill-mode : forwards ;
  }
  .button:hover .button__drow2::after{
      animation : drow5 linear .06s .32s ;
      animation-fill-mode : forwards ;
  }
  @keyframes drow1{
      0%   { height : 0 ; }
      100% { height : 100px ; }
  }
  @keyframes drow2{
      0%   { width : 0 ; opacity : 0 ;}
      10%  { opacity : 0 ;}
      11%  { opacity : 1 ;}
      100% { width : 120px ; }
  }
  @keyframes drow3{
      0%   { width : 0 ; }
      100% { width : 80px ; }
  }
  @keyframes drow4{
      0%   { height : 0 ; }
      100% { height : 120px ; }
  }
  @keyframes drow5{
      0%   { width : 0 ; }
      100% { width : 124px ; }
  }
  
  .container-btn{
      display : flex ;
      flex-direction : column ;
      justify-content : center ;
      align-items : center ;
  }
  .button:not(:last-child){
    margin-bottom : 64px ;
  }